css如何隐藏溢出来的文字


本文摘自PHP中文网,作者V,侵删。

css隐藏溢出来的文字的方法:可以利用text-overflow属性来实现,如【text-overflow:ellipaos;】,属性值ellipsis表示显示省略符号来代表溢出来的文字。

属性介绍:

text-overflow 属性规定当文本溢出包含元素时发生的事情。

(学习视频分享:css视频教程)

语法:

1

text-overflow: clip|ellipsis|string;

属性值:

f2d3fb040e60144270c4d9c5cc0f7d5.png

让溢出的文字隐藏

1

2

3

text-overflow:ellipaos;/*让最后一个显示部分遮掩部分的字消失,而变成三个点点的省略号*/

overflow:hidden; /*这个参数可以让超出部分隐藏起来,但是这个隐藏是一种按照宽度而来的直接隐藏*/

white-space:nowrap; /* 确保超出文字显示在一行里面*/

举例:

1

2

3

4

5

6

  width:XXpx;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

相关推荐:CSS教程

阅读剩余部分

相关阅读 >>

css怎么使用外部艺术字

了解一些 提高前端开发效率的 css 属性选择器

如何清理无用的css样式,你知道吗?

css font-size 不管用怎么办

css a为什么设不了宽度

css column-gap属性怎么用

css怎么把按钮上移

css怎么写五角星

使用<nav>链接滚动到页面相应部分

css盒模型有哪些属性

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...