如何可以CSS“Shrinkwrap”方法工作与最大宽度和没有BR换行标签？ [英] How can the CSS "Shrinkwrap" method work with max-width and without BR line-break tag?

问题描述

我正在尝试创建一个最大宽度边界框，它将包装文本（空格，不允许分词）和收缩包装到最长的文本行的宽度。有关各种收缩包装方法的演示，请参见 http：//www.brunildo。 org / test / IEMshrink-to-fit.html

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

我选择了float方法，但在我的测试中，效果。

I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.

在下面的示例代码中（也可以在 jsbin ），我显示当你让这些单词包装自己时会发生什么，当你插入一个< br / code>换行符。使用< br /> 手动产生我正在寻找的效果，而省略它正确包装文本，但强制白框占据整个max-width作为它的宽度，我想避免。

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:

我创建了一个JS方法来手动插入< br /> 标记作为一个stopgap措施，但我想象一定有一些方法， CSS / HTML。感谢您的帮助！

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!

推荐答案

在Google Chrome中将h1的显示更改为接近您想要的。但它不是完美的，我不能真正建议作为一个解决方案，全心全意，主要是由于没有在任何其他浏览器测试。

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.

这篇关于如何可以CSS“Shrinkwrap”方法工作与最大宽度和没有BR换行标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！