Div 溢出时的 Div 最大宽度交替

Question

我试图限制<div>max-width（没有width）（max-width 超出屏幕长度）当 div 获得水平滚动条（缩放时滚动条或 div 中的冗长文本）。

这是不可能的，但是，究竟对我有用的是浏览器将 div 溢出处理为在屏幕内，但“只需添加一个水平滚动条”然后我可以使用“最大宽度”（没有 width） （某处外屏幕长度）。

我认为只使用max-width（不使用width），因为很多时候我的div 中的文本量很少，然后使用width 会导致非常糟糕的视图和额外的空白并且总是滚动条。并且max-width（没有width）（在屏幕外的某个地方）在屏幕内给出了换行符，因此没有出现水平滚动条，也没有。文本行的数量比正常情况下增加。但是我需要一个水平滚动条（根据行数保持自然高度）+一个max-width（溢出时也不要使所有文本单行）。

我考虑过white-space:nowrap，但使用这条线不会在max-width 处中断，所有文本都将是单行。

我还在学习，也许如果我将一些 css 与上面的 css 或任何其他 css 结合起来以获得所需的结果......

---

HTML：

<div class='a'>
<div class='b'>
sometimes text is lengthy sometimes short
</div>
</div>

CSS：（不适合我）

.a{ overflow-x:auto; }
.b{ max-width:1000px; }

http://jsfiddle.net/xm9yzvxz/ (max-width)（放大缩小时不添加水平滚动条和改变高度，对我来说是个大问题）

http://jsfiddle.net/6xfw6fh2/（宽度）（在放大缩小时添加水平滚动条和恒定的行数（好），但是每当 div 有少量文本时，这对于我的情况来说会是个问题，比如空白)

Answer 1

我相信这就是你所需要的，你可以给 max-width 100%，它会占用父级的 100%。

.b {
  max-width: 100%;
  word-wrap: break-word;
}

<h1> Large text:</h1>

<div class='b'>
  sometimes text is lengthy sometimes shortlwkerjweklrweklnfklwenflkwenflkwenflkwenfklwenflkewnflkwenflkwenfklwenflweknflkwenfwelkfnewlkfnwelkfnlkewfnlkwefnlwekfnlewknfklwenfklewfnklewfnlkewnflkewfnlkewnflkewfnlkwefnlkewnfklwefnlkwenflwenflkewnflwe
</div>
<h1> Less text:</h1>

<div class='b'>
  sometimes text is lengthy sometimes
</div>

Answer 2

如果您想限制垂直高度（以避免额外的换行符空白），请在 a 类中添加一个 min-height 参数。使用em 作为高度，使其相对于字体大小 - 2em 似乎显示一行文本（具有默认填充和边距），这应该是短字符串的最小值。

CSS：

   .a{
       overflow:auto;
       min-height:2em;
       max-height:5em;
   }
   .b {
       width: 1000px;
   }

HTML：

<div class='a'>
    <div class='b'>
        sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah. sometimes text is lengthy sometimes short but in this case it is very long... blah blah blah.
    </div>
</div>

Answer 3

虽然你的要求还不清楚。如果您希望单行中的所有文本没有空格，请尝试使用此 css。 谢谢。

CSS

.a {
   overflow:auto;
   min-height:2em;
   max-height:5em;
}
.b {
   max-width: 1000px;
   white-space:nowrap;
}