1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html不换行溢出省略号代替 css怎么设置强制不换行溢出显示省略号?

html不换行溢出省略号代替 css怎么设置强制不换行溢出显示省略号?

时间:2023-03-10 16:30:07

相关推荐

html不换行溢出省略号代替 css怎么设置强制不换行溢出显示省略号?

css可以使用white-space:nowrap;样式使元素内文本不换行,然后使用text-overflow:ellipsis;样式设置元素内文本超出显示省略号。

css设置强制不换行溢出显示省略号的方法介绍:

1、css设置强制不换行:

我们可以通过为元素设置css样式white-space:nowrap;使元素内文本不换行。white-space属性设置如何处理元素内的空白。

规定段落中的文本不进行换行css代码:p

{ white-space: nowrap

}

2、css设置超出显示省略号:

text-overflow属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。

语法:text-overflow: clip|ellipsis|string;

设置div内超出省略号显示css代码:div.test

{

text-overflow:ellipsis;

}

3、设置超出显示省略号示例:

p

{

width:500px;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

这是一些文本。

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。