二月繁华编程技术 2020-09-29

CSS文本样式设置

如何设置CSS文本样式，在编辑网页时，我们不可避免地会使用大量文本。文本在网页上也有其自己的格式。如何通过某个CSS语句确定此文本的格式？
CSS文本样式设置

设置文本居中

text-align:center

属性规定元素中的文本的水平对齐方式，设置文本居中

text-align的center应用在一个容器上，它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器的内容不会居中。
text-align具有向下传递性，会不断地向子元素传递。如果设置一个div，则其子div中的内容也会居中。

margin:0 auto

自动对齐，设置块元素或与之类似的元素居中

用margin：0 auto使元素产生位置变化，需要将其放在div中。需要使文本居中，只要将文本放在一个div中即可。

不过，使用margin 的时候需要注意的情况比较多，稍不注意的时候就容易导致margin失效。

float：left或margin：100px将magrin：0 auto的效果覆盖。
使用margin需要指定DOCTYPE.DOCTYPE是指定浏览器用哪一种标准解析HTML代码，如果不指定，可能会不失效。此外，DOCTYPE前不能够有代码，否则也会导致margin；0 auto失效。

CENTER

使布局居中

<center>是将所有被包含的元素都居中显示,而text-align：center只是将元素下面的内联元素居中显示。但HTML5中不支持<center>，不建议使用该方法。

设置文本两端对齐

text-align:justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify
line-height:0 解决标准浏览器容器底部多余的空白
1
2
3
4
5
6
.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}

说明：模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格

1
2
3
4
5

@media all and (-webkit-min-device-pixel-ratio:0){
.content{
font-size:0;
}
}

说明：

text-align-last:justify 目前只有IE支持，标准浏览器需要使用 .demo:after 伪类模拟类似效果
opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白,且子类必须是inline-block元素

1
2
3
4
5
6
7
8

.content:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}

设置文本溢出省略

CSS单行文本溢出省略问题

1
2
3
4
5
6

.overhidde{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

这里的width属性是必须的，因为需要知道它的宽度是多少，才能判断溢出；

overflow:hidden; 是为了隐藏溢出的文本；
white-space: nowrap; 默认。空白会被浏览器忽略；
text-overflow: ellipsis; 显示省略符号来代表被修剪的文本。

css多行文本溢出省略问题

1
2
3
4
5
6
7
8
9

.overhidden2{
height:53px;
width:100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本，大家可以试一下不加的效果，就一目了然了。

line-clamp属性是为了控制文本显示多少行。

关于display和box-orient，在这里简单说一下：