如何让文本适配div容器宽度？无需JavaScript实现方案

嘿，刚好碰到过类似的场景，完全不用JavaScript，靠CSS就能完美解决！下面给你几个实用的方案，你可以根据自己的布局需求选：

方案1：单行文本截断（适合希望文本保持一行，超出部分显示省略号） #

如果你的报价区块需要保持单行展示，给包含报价文本的元素加上下面的CSS：

.quote-text {
  /* 父容器需要设置宽度/最大宽度，比如 */
  width: 120px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

• overflow: hidden：隐藏超出容器的部分
• text-overflow: ellipsis：给溢出的文本添加省略号
• white-space: nowrap：强制文本不换行

方案2：多行文本截断（允许换行，但限制最大行数） #

如果允许文本换行，但不想让它占太多空间，可以用这个webkit内核支持的方法（现代浏览器基本都兼容）：

.quote-text {
  width: 120px;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制最多2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

如果需要更兼容的写法，可以配合max-height和line-height来估算行数，比如行高是1.5em，2行就是3em，设置max-height: 3em; overflow: hidden;，不过这种没有省略号，适合对省略号要求不高的场景。

方案3：弹性布局下的自适应收缩 #

如果你的报价区块是用Flex布局搭建的，只要给文本元素加上min-width: 0，就能让它在空间不足时自动收缩：

.quote-container {
  display: flex;
  /* 父容器的其他样式 */
}

.quote-text {
  flex: 1;
  min-width: 0; /* 关键！让flex子项可以收缩到内容宽度以下 */
  /* 可选：加上上面的单行/多行截断样式 */
}

这个方法能让文本在Flex容器里自动适配空间，不会撑破父容器。

你可以根据自己的设计需求选对应的方案，测试一下就能看到效果啦！

内容的提问来源于stack exchange，提问作者Jack Shcherbakov