css3——div内文字换行及省略显示

要实现在div内的文字换行和省略显示，可以使用CSS3中的text-overflow属性和white-space属性。

text-overflow属性可以设置当文本溢出容器时如何显示。常见的值有：

- clip：裁剪文本，超出部分不显示。
- ellipsis：在超出容器部分显示省略号。

white-space属性可以控制元素内文本的空白符处理方式。常见的值有：

- normal：合并空白符，换行符作为分隔符。
- nowrap：合并空白符，不允许换行。
- pre-wrap：保留空白符和换行符，但自动换行。

下面是一个例子：

<div class="text">
  This is a long text that should be truncated with ellipsis.
</div>

.text {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样就可以实现在宽度为200px的div中，超出部分显示省略号的效果。如果想要在一行内显示尽可能多的文本，可以将white-space属性设置为`normal`或`pre-wrap`。

相关问题

css 实现文字换行 ，后文字溢出变成省略号

可以通过CSS的文本溢出属性（text-overflow）和white-space属性来实现文字换行和溢出后省略号的效果。

具体的做法是先给元素设置一个固定的宽度，然后设置white-space属性为nowrap，这样文字就可以在一行内显示。接着，设置文本溢出属性为ellipsis，这样当文字超出元素宽度时，就会变成省略号。

例如：

div {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样就可以实现文字自动换行，并且溢出后显示省略号的效果。

css不换行，超出显示省略号

要实现CSS不换行，并在超出部分显示省略号，可以使用以下样式：

div {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

这样设置后，文字内容在超出容器宽度时，会被隐藏，并在结尾处显示省略号。这样可以实现不换行，并在超出部分显示省略号的效果。