首页 > 前端开发 博客日记

网页中文字不换行溢出显示省略号的效果怎么做

21-01-12前端开发围观499

简介 css设置文字不换行溢出显示省略号的方法:使用white-space:nowrap样式设置文字不换行,使用text-overflow:ellipsis样式设置文字溢出显示省略号,使用overflow:

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;
    }


效果如下:

这是一个demo这是一个demo这是一个demo这是一个demo这是一个demo

white-space:

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

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

text-overflow:

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

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

overflow:

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

说明

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

Tags:

本站推荐