css怎么设置文字不换行溢出显示省略号?

css设置文字不换行溢出显示省略号的方法:

HTML:

<p class="content">
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
</p>

css:

	.content {
        width: 500px;
        /* 控制文字不换行 */
       	white-space: nowrap;
       	/* 文字溢出以省略号显示 */
        text-overflow: ellipsis;
        /* 溢出隐藏 */
        overflow: hidden;
    }

效果如下:

1.jpg

white-space:

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。

text-overflow:

text-overflow属性指定当文本溢出包含它的元素,应该发生什么。

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

overflow:

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

更多相关知识请关注web前端课程

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

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏