如何设置CSS文本样式,在编辑网页时,我们不可避免地会使用大量文本。 文本在网页上也有其自己的格式。 如何通过某个CSS语句确定此文本的格式?
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 解决标准浏览器容器底部多余的空白
    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;
}
}

说明:

  1. text-align-last:justify 目前只有IE支持,标准浏览器需要使用 .demo:after 伪类模拟类似效果
  2. 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属性是必须的,因为需要知道它的宽度是多少,才能判断溢出;

  1. overflow:hidden; 是为了隐藏溢出的文本;
  2. white-space: nowrap; 默认。空白会被浏览器忽略;
  3. 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,在这里简单说一下:

  1. 必须定义display属性才可以对box进行划分。
  2. box-orient 属性指定一个box子元素是否应按水平或垂直排列。
本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!网站资源来自用户分享,如有侵权行为请联系网站客服处理。
二月繁华 » CSS文本样式设置

发表评论

提供最优质的资源集合

了解详情