css_文本溢出

1) 文本单行

文本单行：设置文本不换行，元素无法容纳的文本会溢出。

语法：

text-wrap: none;

此属性为css3中的属性，目前主流浏览器都不支持。

如：默认会换行

<div class="wrap">

手机支付用户规模已达2.76亿，中国手机网民规模5.94亿，较2014年底增3679万人

</div>

.wrap{width:200px;height:80px;border:1px solid red;margin:0px auto;}

 

.wrap{width:200px;height:80px;border:1px solid red;margin:0px auto;

text-wrap:none;

white-space:nowrap; /*需要加上此句才起作用*/

}

 

 

2) 文本溢出操作

文本溢出操作：属性规定当文本溢出包含元素时发生的事情。

语法：

text-overflow: clip | ellipsis | string;

值	说明
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本（没测试过）

如：

<div class="textoverflow">

全球华人创新创业大赛正式启动，2015（第十四届）中国互联网大会圆满结束。

</div>

.textoverflow{

width:200px;height:40px;border:1px solid red;margin:100px auto;

white-space:nowrap; /*强制文本单行显示*/

overflow:hidden;/*溢出内容不显示*/

}

注：需要加上上面的两句才能看到效果。第一是不折行，二是溢出不显示。

 

加上语句：text-overflow:clip;

结果和上面一样，这应该就是默认值。

 

加上语句：text-overflow:ellipsis;

设置溢出文本显示为省略标记

 

注：如果是希望在表格中使用...功能，一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed，下面td的定义才能起作用。