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背景超出宽度怎么办

css3如何实现图片滚动播放效果(附代码)

css如何设置内边距

css怎么实现竖线

怎么在head区域引入css

css怎么禁止点击事件

如何使用css实现背景图像透明

css放在html的哪里

css3如何实现关闭按钮

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




打赏

取消

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

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

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

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

评论

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