CSS“Shrinkwrap”如何实现？方法可以使用 max-width 并且没有 BR 换行标签吗？
我正在尝试创建一个最大宽度边界框，它将包裹文本（在空格上，不允许断字）并收缩到最长文本行的宽度。有关各种收缩包裹方法的演示，请参阅 http://www.brunildo。 org/test/IEMshrink-to-fit.html
我选择了“浮动”方法，但在我的测试中，没有一种方法达到了我想要的效果。
在下面的示例代码中（也可通过 jsbin 进行实时预览），我展示了当您让单词自行换行时会发生什么，以及当您插入
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
下面是问题的屏幕截图，并进行了一些详细说明：
我创建了一个 JS 方法来手动插入
I'm attempting to create a max-width bounding box which will both wrap text (on spaces, no word-breaking allowed) and shrinkwrap to the width of the longest line of text. For a demo of the various shrinkwrap methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.
In the example code below (also available with live-preview at jsbin), I show what happens when you let the words wrap themselves, and what happens when you insert a <br /> line break tag. Using <br /> manually results in exactly the effect that I'm looking for, while omitting it wraps the text correctly, but forces the white box to take the entire max-width as its width, which I'd like to avoid.
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
Here's a screenshot of the problem with some elaboration:
I've created a JS method to manually insert the <br /> tag as a stopgap measure, but I imagine there must be some way to do this properly using only CSS/HTML. Thanks for the help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在 Google Chrome 中，将 h1 的显示更改为 table-caption 接近您想要的。但它并不完美，我不能全心全意地推荐它作为解决方案，主要是因为没有在任何其他浏览器中测试它。
Changing the display of the h1 to table-caption is close to what you want, in Google Chrome. But it's not perfect and I can't really recommend that as a solution wholeheartedly, mainly due to not testing it in any other browsers.
不确定自发布之前的“table-caption”答案以来浏览器行为是否发生了变化，但它当前不起作用（使用 Chromium 41）：
实际上，使用纯 CSS 似乎无法实现所需的行为（截至 2015 年）。进一步的解释和轻量级的Javascript解决方法可以在另一个SO问题中找到： max-width adjustment to fit文字？
Not sure if browser behavior has changed since the earlier 'table-caption' answer was posted, but it does not currently work (using Chromium 41):
In reality, it seems the desired behavior is not possible with pure CSS (as of 2015). Further explanation and a lightweight Javascript workaround are available in another SO question: max-width adjusts to fit text?