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宽度的单词）必须扩展自己以包含最长的单词但保持包装词

Answer 1

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

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