基于最长行实现多行文本块整体下划线（不设固定宽度）

嘿，我完全懂你碰到的这个麻烦——用display: inline-block处理短文本时下划线完美对齐最长行，但一遇到无空格的长单词就直接撑破布局，下划线也跟着跑偏对吧？给你几个实用的解决方案，都不需要设置固定宽度，适配不同文本块：

方案1：用display: table（最推荐，兼容性拉满） #

table元素的特性就是自动收缩到内容的最大宽度，同时会让长单词在父容器宽度限制内自动换行，下划线会精准对齐文本块的最长行，完全符合你的需求。

.text-block {
  display: table;
  border-bottom: 1px solid #333; /* 自定义下划线样式 */
}

这个方案的优势在于：

• 不需要任何固定宽度设置，自动适配每个文本块的最长行
• 长单词会正常换行（只要父容器有宽度限制，比如body的默认宽度）
• 兼容性覆盖所有现代浏览器甚至老IE，非常稳定

方案2：Inline Flexbox 实现 #

利用inline-flex的收缩特性，配合垂直排列的flex方向，也能达到同样的效果：

.text-block {
  display: inline-flex;
  flex-direction: column;
  border-bottom: 1px solid #333;
}

这个方案适合已经在使用Flexbox布局的项目，行为和table类似，同样不需要固定宽度。

方案3：处理极端长单词（无空格的超长文本） #

如果你的文本里有完全没有空格的超长单词（比如一串随机字符或长URL），可以加上换行属性确保它不会撑破容器，配合上面的display属性一起使用：

.text-block {
  display: table;
  border-bottom: 1px solid #333;
  overflow-wrap: break-word; /* 优先在单词断点处换行 */
  /* 或者用 word-break: break-all; 强制任意位置换行 */
  max-width: 100%; /* 确保不会超出父容器的宽度 */
}

这样即使是极端长文本，也会在父容器范围内换行，下划线依然对齐最长的那一行。

你可以根据自己的项目环境选择最合适的方案，display: table应该是最省心的选择~

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