Div溢出时Div最大宽度交替

问题描述

当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; }

（最大宽度）（放大时不添加水平滚动条和更改高度，这对我来说是个大问题）

（宽度）（在放大缩小时添加水平滚动条和恒定的行数（很好），但是每当div文本较少时，对于我的情况来说就是问题像空白）

如果你想限制垂直高度（以避免额外的行打破空白）一个最小高度参数添加到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>

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

的CSS

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