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、设置超出显示省略号示例:

<html>
<head>
<style type="text/css">
p
{   
    width:500px;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;
}
</style>
</head>
<body>

<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>

</body>
</html>

效果图:

1.jpg

以上就是css怎么设置强制不换行溢出显示省略号?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏