css_文本溢出 爱被打了一巴掌 2022-05-25 05:07 204阅读 0赞 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;\} ![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> 如: <div class="textoverflow"> 全球华人创新创业大赛正式启动,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
还没有评论,来说两句吧...