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怎么样实现图片圆角

bootstrap.css样式表是什么

css如何设置超链接的样式

外联css怎么写

css如何设置英文首字母大写

在线演示一个全屏切换效果实例

css外链式与内联式的区别是什么

css的+(加号)选择器怎么用

css怎么显示滚动条

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




打赏

取消

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

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

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

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

评论

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