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的定义才能起作用。