css 设置文本展现形式

文本居中

text-align:center

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

(1)text-align的center应用在一个容器上,它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器,如果里面的容器display为block,则里面的容器的内容不会居中。

(2)text-align具有向下传递性,会不断地向子元素传递。如果设置一个div,则其子div中的内容也会居中。

margin:0 auto

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

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

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

(1)float:left或margin:100px将magrin:0 auto的效果覆盖。

(2)使用margin需要指定DOCTYPE.DOCTYPE是指定浏览器用哪一种标准解析HTML代码,如果不指定,可能会不失效。此外,DOCTYPE前不能够有代码,否则也会导致margin;0 auto失效。

CENTER

 使布局居中

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

文本两端对齐

text-align:justify

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

(1)IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合,text-align-last 要生效,必须先定义text-align 为justify
(2)line-height:0 解决标准浏览器容器底部多余的空白

.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}

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

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

说明:
(1)text-align-last:justify 目前只有IE支持,标准浏览器需要使用 .demo:after 伪类模拟类似效果
(2)opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白

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

且子类必须是inline-block元素

文本溢出省略

css单行文本溢出省略问题

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

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

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

css多行文本溢出省略问题

.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,在这里简单说一下:

说明:必须定义display属性才可以对box进行划分。

box-orient 属性指定一个box子元素是否应按水平或垂直排列。

添加评论

电子邮件地址不会被公开。 必填项已用*标注