CSS - 当文本溢出时将Div扩展到最近的换行单词

Question

我目前处于这种情况

我有一个容器，其中包含两个标题，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;
}

我被要求尽可能使容器保持350px宽度，但在出现非常长的单词时，容器必须自动扩展，以便文本可以换行，但最长的单词（即文本溢出的单词）全部位于div内部。实际上，呈现的文本应该是“Word1 Word2”和“Verylongword3”，而不是“Word1 Word2 Verylongword3”。如果我固定div宽度，就会出现文本溢出。如果我使用flexbox或min-width，文本就会在整行上自动扩展。最好的解决方案是使用纯CSS，但如果纯CSS理论上不可能，则可以使用JavaScript。我无法固定宽度，因为Verylongword3可以是Word4 @ Word5，在这种情况下，呈现的文本应该是“Word1 Word2”、“Word4 @”和“Word5”。换句话说，如果需要（单词大于350px宽度），容器必须自动扩展以包含最长的单词，但保持单词换行。

- emmea90

---

抱歉，我不知道你在这里尝试做什么。你能再解释清楚一点吗？ - Serg Chernata

我有一个固定最小宽度的容器中包含一段文本。文本实际上会换行，但是某个单词可能比div宽度（350px）更长。在这种情况下，我必须扩展div以适应最长的单词大小，但保持段落换行。 - emmea90

使用 JavaScript，您可以执行类似以下的操作：$('h1').split("-").pop(); 以获取标题的最后一个单词，并在其前面添加 <br>。 - Ahmed Ziani

是的，我认为这是一个解决方案，但有两个问题。1）最长的单词可以在文本的任何位置，不一定是最后一个。2）如果我换行所有行，我得到的结果是Word1 <br> Word2 <br> LongestWord3 <br> Word4 <br> Word5，但这不是我要呈现的内容。 - emmea90

Answer 1

针对以下问题，我们提供了JavaScript解决方案：检测文本滚动大小并进行放大。

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

- emmea90