css_文本溢出

爱被打了一巴掌 2022-05-25 05:07 245阅读 0赞

1) 文本单行

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

语法：

text-wrap: none;

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

**如：默认会换行**

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

</div>

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

![2018050815542217][]

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

text-wrap:none;

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

![20180508155445243][]

2) 文本溢出操作

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

语法：

text-overflow: clip | ellipsis | string;

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

如：

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

</div>

.textoverflow\{

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

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

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

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

![20180508155510824][]

加上语句：text-overflow:clip;

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

![20180508155532900][]

加上语句：text-overflow:ellipsis;

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

![2018050815555412][]

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

[2018050815542217]: /images/20220525/d80dd787b4894a548995c113e128d581.png
[20180508155445243]: /images/20220525/463cca6778c94f3dab7c63495ee2b631.png
[20180508155510824]: /images/20220525/f9b3c77aa0c242039c4d3d8316239a85.png
[20180508155532900]: /images/20220525/32bf4a717da14b74a9561d6d00a5b6f8.png
[2018050815555412]: /images/20220525/50e3ae64d7f249b48d082c843ad1f4d5.png