javascript - div溢出时div最大宽度交替

Question

我正在尝试限制 <div> max-width (没有 width )( max-width 超出屏幕长度的某处)当 div 获得水平滚动条时(缩放时滚动条或 div 中的冗长文本)。

这是不可能的，但是，对我来说到底有用的是，浏览器将 div 溢出视为在屏幕内，但“只需添加一个水平滚动条”，然后我可以使用“max-width”(没有 width) (某处外屏长度)。

我以为只使用 max-width (没有 width )因为很多时候我的 div 中的文本量很少然后使用 width将使它的 View 非常糟糕，并且会出现额外的空白区域，并且始终是滚动​​条。和 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/ (最大宽度)(放大缩小时不添加水平滚动条和改变高度，对我来说是个大问题)

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>