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

非常longword3

而不是

word1 word2非常长字3

如果我修复了div宽度，则会有文本溢出。如果我使用flexbox或最小文本，则在所有线路上展开自身。最好的解决方案是在纯CSS中进行操作，但是如果理论上在纯CSS中不可能，我可能会使用JavaScript。

我无法修复宽度，因为非常longword3可以是word4 @ word5，在这种情况下，我应该得到

Word1 Word2

word4 @

word5

作为渲染

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

Answer 1

对于谁可能关注的是JavaScript中的解决方案：检测文本滚动大小并放大

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