Div溢出时Div最大宽度交替

Question

I am trying to limit the <div> max-width (without width ) ( max-width somewhere beyond screen length) when div gets a horizontal scrollbar (scrollbar when zoom or lengthy text in div).

It is not possible but, what exactly can work for me, is browser to treat div overflow as it is inside screen but "just add a horizontal scrollbar" then i can use 'max-width' (without width ) (somewhere outer screen length).

I thought using only max-width (without width ) because many times there is very little amount of text in my div then use of width will make it very bad view and extra white space and always a scrollbar. And max-width (without width )(somewhere outside screen) is giving line-breaks inside screen where it ends so no horizontal scrollbar appearing and no. of text lines increasing than it should normally. But i need a horizontal scrollbar (to keep natural height based on number of lines) + a max-width (not to make all text single line also when overflow) .

I thought about white-space:nowrap but using this lines are not breaking at max-width all text will be single line.

I am still learning, maybe if i combine some css to above css, or any other css to get the desired result...

---

HTML:

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

CSS: (not working for me)

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

http://jsfiddle.net/xm9yzvxz/ (max-width)(not adding horizontal scrollbar and changing height when zoom-in zoom-out, big problem for my case)

http://jsfiddle.net/6xfw6fh2/ (width)(adding horizontal scrollbar and constant no. of lines when zoom-in zoom-out (good), but whenever div have small amount of text, it will be problem for my case like white-space)

Answer 1

I believe this is what you need, You can give max-width 100%, it will take 100% of parent.

 .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

If you want to restrict vertical height (to avoid extra line break white space) add a min-height parameter to the a class. Use em for the height to make it relative to the font size - 2em appears to show one row of text (with the default padding and margins), which should be your minimum for a short string.

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

Although your requirement in not clear still. If you want all text in single line without white spaces then try this css. Thanks.

CSS

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