关于css中文字排版的一些小知识点

顺晟科技

2022-09-13 14:05:41

201

1.要换行，且不让文字超过边框：

{
    word-wrap:break-word; 
    word-break:break-all;
    overflow:hidden;
}

2.首行缩进

正确地缩进两个汉字的宽度就需要使用相对单位。em是相对长度单位，而且是相对于当前对象内文本的字体大小的单位，那么两个汉字的宽度就是2em

p{text-indent:2em;}

3.行高line-height属性值具有一个特性

可以不设置单位，也可以使用小数点(line-height:1.5)。但不设置单位的时候会以段落中某个最大的文字字体为基准做行高处理。注：在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离，而不是一个绝对数值，文本基线拉开的距离可能比line-height值更大。此外line-height并不影响替换元素的布局，不过确实可以应用到替换元素。 4.首字下沉

p:first-letter{ 

        float:left;

        font-weight:bold;  

         font-size:2em   //设置段落p标签的首字为其他字体的2倍

  }

p{clear:both }  //清除首字的浮动，避免影响p标签的高度与其叠加

5.首行文字进行操作 :first-line伪对象仅影响标签元素中第一行的文本，而无论标签元素中第一行内容有多长：

p:first-line{ font-weight:bold; }

注：在css2中，：first-letter和：first-line伪元素只能应用于标记或段落之类的快元级元素，而不能应用于超链接等行内元素。 6.字体右对齐（编写华为电子书的时，客户要求页面中的文字右边也好对齐，细节很重要）：

<p style="text-align:justify;text-justify:inter-ideograph;>

没有添加<p>标签之前的效果：

添加了p标签之后：

7.镂空的文字

h1 {
color: transparent;
-webkit-text-stroke: 1px red;
}

8.大小写字母转换text-transform

默认值为none对文本不做任何改动；参数upper-case和lowercase将文本转换为全大写活小写字符；capital只对每个单词的首字母大写。

<style>
      h1{text-transform: capitalize;}
</style>
<body>
      <h1>This is an H1 element</h1>    
</body>

结果如图：

9.文字阴影

text-shadow: 1em 1em 5px gray,-1em -1em silver;

第一组参数 ‘1em 1em 5px gray ’中第一个值控制阴影的左右位置（可为负），第二个值控制阴影的上下位置（可为负），第三个参数控制阴影的模糊程度（模糊度随着数值的增大而增大），第四个参数表示阴影的颜色。第二组参数‘-1em -1em silver’，和第一组类似，只是省略了模糊度。

应用了此属性的文字效果如下：

上一篇：CSS样式案例(1)-文本的排版下一篇：CSS格式化排版

网站建设

Css

关于css中文字排版的一些小知识点