CSS - 将文本溢出时的 Div 扩展到最近的自动换行答案

【问题标题】：CSS - Expand Div on text overflow to the nearest word wrappingCSS - 将文本溢出时的 Div 扩展到最近的自动换行
【发布时间】：2023-04-07 18:55:01
【问题描述】：

我目前处于这种情况

我有一个包含两个标题 h1 和 h2 的容器

<div class="container">
    <h1>Word1 Word2 Verylongword3</h1>
    <h2>Brief text</h2>
</div>

标题是垂直的，使用 flexbox 一个在另一个之上

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 350px;
}

我被要求在大多数情况下使容器保持 350 像素的宽度，但如果单词很长，容器必须以文本被包裹得更多但最长的单词的方式扩展自己（即text-overflowing) 都在 div 里面。

实际上，作为渲染，文本应该是

字1字2

很长的词3

不是

Word1 Word2 Verylongword3

如果我修复了 div 宽度，我就会出现文本溢出。如果我使用 flexbox 或 min-width 文本会在整个行上扩展。最好的解决方案是在纯 CSS 中完成，但如果理论上在纯 CSS 中不可能，我可以使用 javascript。

我无法固定宽度，因为 Verylongword3 可以是 Word4 @ Word5，在这种情况下我应该得到

字1字2

Word4@

Word5

作为渲染

编辑：换句话说，如果需要，容器（大于 350 像素宽度的单词）必须扩展自己以包含最长的单词但保持单词环绕

【问题讨论】：

对不起，我不知道你想在这里做什么。你能解释清楚一点吗？
我在一个固定最小宽度的容器中有一个文本。文本实际上是换行，但一个单词可能比 div 宽度（350px）长。在这种情况下，我必须扩展 div 以适应最长的单词大小，但要让段落换行。
Whit javascript 你可以做这样的事情： $('h1').split("-").pop();获取您的标题的最后一部作品并预先添加
是的，我认为这是解决方案，但有两个问题。 1）最长的单词可以在文本的任何位置，不一定是最后一个。 2) 如果我包装所有行，我得到 Word1
Word2
LongestWord3
Word4
Word5，结果这不是我必须呈现的。

【解决方案1】：

对于谁可能关心，javascript中的解决方案：检测文本滚动大小并放大它

$('.container').css("width", $('.container')[0].scrollWidth + "px");

【讨论】：