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;
}
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
效果图: