将文本拉伸到 div 宽度 css

在前端开发中，经常遇到将文本根据父元素宽度进行拉伸的需求。这时，就可以使用 CSS 中的 text-overflow 和 white-space 属性来实现。

text-overflow属性

text-overflow 属性用于定义当文本溢出包含元素时发生的事情。该属性有以下几个取值：

• clip：默认值，文本溢出时，剪裁文本；
• ellipsis：用省略号（...）来代替溢出的文本；
• string：用指定的字符串代替溢出的文本。

当我们将 text-overflow 属性设置为 ellipsis 时，需要再设置 white-space 属性为 nowrap，防止文本被换行。

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

将文本拉伸到 div 宽度

如果我们想要将文本拉伸到 div 的宽度，可以将 text-overflow 设置为 clip，然后将 white-space 设置为 pre-line，表示保留换行符，但忽略空格。

div{
  overflow: hidden;
  text-overflow: clip;
  white-space: pre-line;
}

然后，给文本添加一个 display: inline-block 属性，表示将文本显示为一个块级元素，然后设置文本的宽度为 100%。

div span{
  display: inline-block;
  width: 100%;
}

这样，文本就会自动拉伸到父元素的宽度了。

完整的代码如下：

div{
  overflow: hidden;
  text-overflow: clip;
  white-space: pre-line;
}

div span{
  display: inline-block;
  width: 100%;
}

总结

以上就是将文本拉伸到 div 宽度的方法。通过设置 text-overflow 和 white-space 属性，可以实现文本的溢出处理和自适应宽度。