css宽度缩小文字消失 |css 画横线

例如此处的一个div元素，宽度只有 200px，然而文本内容却超出了其宽度的范围，导致文字不能完整显示，并被省略掉一部分:
这是一段很长很长的文本内容，无法全部显示在此区域的范围内。
在这种情况下，大家可以通过设置 text-overflow 属性来控制省略号的出现方式，同时，为了防止文本截断，可以将 display 属性设置为 block 或 inline-block，使文本自动换行，具体代码如下：
div {
width: 200px;
white-space: nowrap;      /* 禁止折行 */
overflow: hidden;         /* 超出部分隐藏 */
text-overflow: ellipsis;  /* 省略号显示方式 */
display: inline-block;    /* 防止截断 */
}
这是一段很长很长的文本内容，无法全部显示在此区域的范围内。

通过这种方式，大家可以在实际开发中，控制文本的显示方式，避免文本截断，同时提高用户体验。