html后面字体省略详情,css如何让文字省略？

在平时项目中可能会遇到文字在固定宽高的容器中可能会放不下，这时需要将文字多余部分隐藏并用省略号的方式显示。下面我们来看一下css设置文字隐藏的方法。

css可以使用text-overflow: ellipsis;设置文字省略，此方法会将多出的文字以省略号显示。设置前使用white-space:nowrap;设置文本不换行。

示例：

.text{

width:200px;

height:20px;

border:1px solid #000000;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

cursor:pointer;

}

这是一些文本。这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。这是一段很长的文字

效果图：

设置文本省略主要属性介绍：

white-space属性：

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

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

属性值：

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow 属性：

text-overflow 属性规定当文本溢出包含元素时发生的事情。

属性值：

clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。