Div溢出時Div最大寬度交替

Question

當div獲取水平滾動條（當div中的縮放或冗長的文本時，滾動條）時，我試圖限制<div> max-width （無width ）（ max-width超出屏幕長度）。

這是不可能的，但是，對我而言到底能起作用的是，瀏覽器將div溢出視為是在屏幕內部，但是“僅添加水平滾動條”，然后我可以使用“ max-width”（不使用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/ （最大寬度）（放大時不添加水平滾動條和更改高度，這對我來說是個大問題）

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類。 使用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;
}