css文字溢出想用省略号形式表示 但效果出不来

Question

css文字溢出想用省略号形式表示 但效果出不来
代码如下：

效果如下：

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

问题分析：

根据提供的代码，设置了写作区域高度为200px，当文字溢出时，为了更好的用户体验，需要使用省略号来表示被截断的文本，但是运行后显示的效果并不如意，显示的只是直接截断文本，没有使用省略号。

解决方案：

1. 设置宽度

• 实现省略号需要先设置文本容器的宽度。

1. 使用white-space属性

• 这里的white-space: nowrap;表示禁止文字自动换行。

1. 使用text-overflow属性

• 当文本溢出时，使用text-overflow: ellipsis;来将超出显示区域的文字表示为省略号。

1. overflow属性

• 这里的overflow: hidden;表示超出 display: inline-block;或者 display: block;这类可以设置width的容器的部分内容将被裁剪，不显示超出部分。

正确代码：

你可以将.paragraphBox容器的width设置为需要的宽度值，代码如下所示：

.youjiBox .paragraphBox {
  flex: 1;
  height: 200px;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 300px; /*设置需要的宽度*/
}

这样，当文本溢出时，就会自动以省略号的形式表示被截断的文本，文本执行效果如下图所示：