本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
CSS文本属性可定义文本的外观，这是毫无疑问的，其次css可以通过以下属性改变文字的排版，比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距，direction改变文本从左至右的阅读顺序，white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐，至于我们常看到的产品介绍中的省略号“...”如何实现以及文字如何贴图对齐，尽在下面代码详情中一一介绍。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css常用样式对文本的处理演练</title>
<style type="text/css">
div#box{
letter-spacing: 2px;/*字符间距*/
text-indent: 2em;/*首行缩进2字符*/
width: 300px;/*容器宽度*/
height: 200px;/*容器高度*/
color: #000;/*文本颜色*/
background-color:rgb(255,0,0);/*容器背景色*/
}
p{
word-spacing: 5px;/*文字间距*/
direction: rtl;/*文本方向*//*默认文本方向从左至右ltr，left to right*/
white-space:normal;/*处理空白符*/
/*通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：
它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：*/
}
/*文本修饰*/
p.text{
text-decoration: underline;
text-decoration: overline;
text-decoration: none;
text-transform: uppercase;/*全部大写*/
text-transform: lowercase;/*全部小写*/
text-transform: capitalize;/*首字母大写*/
}
/*文本对齐方式*/
div{
text-align: left; /*文本居左*/
text-align: right; /*文本居左*/
text-align: center; /*文本居中*/
text-align: justify;/*两端对齐*/
}
/* 问题：我们通常看到的类似这样的[url]http://www.mi.com/seckill[/url] 商品介绍中的省略号...如何实现？ */
div#box{
width: 400px;
height: 50px;
white-space: nowrap;/*文本不换行*/
overflow: hidden;/*文本穿出隐藏*/
text-overflow: ellipsis;/*省略号*/
line-height: 50px;/*文本垂直对齐*/
}
/* 问题：当插入图片，如何让文本与图片顶对齐围绕 */
img{
width: 200px;
float: left;
vertical-align: bottom;/*文本垂直 middle top bottom */
}
div>p{
float: left;/*文本贴图对齐*/
}
</style>
</head>
<body>
<div id="box">撩人情话：1.我并非言辞夸张或虚情假意。我觉得，这个世界已经待我极好。从前我也不曾这么认为。直到，我在芸芸众生之中遇见你。遇见一道光，让我此生再无遗憾，再不畏惧。2.我是个固执的人，从不愿挪动原则半分，
可你来了之后，我的原则就成了你。3.喜欢一个人是藏不住的，即使嘴巴不说，也会从眼睛里跑出来。我喜欢你，认真且怂，从一而终。</div>
<p class="text">I'm a stubborn person. I never want to move half of the principles, but after you come, my principles become you.</p>
<div class="pic">
<img src="https://i-beta.cnblogs.com/assets/adminlogo.gif" alt="">我是个固执的人，从不愿挪动原则半分，可你来了之后，我的原则就成了你。
</div>
</body>
</html>
<!--后续--> display:block; /*内联对象需加*/
word-break:keep-all; /*不换行*/
white-space:nowrap; /*不换行*/
overflow:hidden; /*内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis; /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
对于表格，定义有点不一样：
table{ width:30em; table-layout:fixed; /*只有定义了表格的布局算法为fixed，下面td的定义才能起作用*/ }
td{ width:100%; word-break:keep-all; /*不换行*/ }
white-space:nowrap; /*不换行*/ overflow:hidden; /*内容超出宽度时隐藏超出部分的内容*/ text-overflow:ellipsis; /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
| 
发表于 2020-3-23 14:00:03
