Getting desired min-width/line-wrapping behavior

Question

What should I do to get a <div> containing variable text behaving as follows:

width is always at least 400px;
words are not broken across lines, but lines can be broken at word boundaries;
text never overflows the border of the div, i.e. the width stretches to accommodate content such as very long words;
width is exactly 400px whenever possible. In particular, if there is a long paragraph with short words, the width should be exactly 400px.

The closest I got was using display: inline-block; min-width: 400px; but long paragraphs with short words still stretch the width.

Additionally use this rule for the text - `word-wrap: break-word;` — Luís P. A., Oct 13 '16 at 09:57

score 2 · Accepted Answer · answered Oct 13 '16 at 12:43

2

You're saying you want your div to behave like a table / table-cell.

This should meet all your stated requirements:

.box {
  width: 400px;
  display: inline-table; /* table|inline-table|table-cell */
  word-wrap: normal;
}

Demo: https://jsfiddle.net/cqo9yupw/

answered Oct 13 '16 at 12:43

paulflakstad

88
4

This seems to work as I wanted. Didn't need the `word-wrap` property, since `normal` is default anyway. – laurt Oct 13 '16 at 15:05

score 1 · Answer 2 · answered Oct 13 '16 at 11:32

1

Try inline-table instead:

.mydiv{
    display:inline-table;
    width:400px;
    border:1px solid red;
    word-wrap:normal;
    word-break:keep-all;
}

answered Oct 13 '16 at 11:32

thooyork

475
1
4
8

score 0 · Answer 3 · answered Oct 13 '16 at 10:13

I suggest you try the following CSS:

#container {
    width:400px;
}


@media screen and (min-width:401px) {

    #container {
        width:auto;
    }
}


@media screen and (max-width:399px) {

    #container {
        width:auto;
    }
}

A div with the id 'container' should be used to encapsulate all parts of your page. This width has been set to 400px. Now when the user zooms in or out, the width should automatically adjust to their user's window. Place the id for the paragraph(s) you have in the @media sections, and they should also auto adjust.

E.g.: @media screen and (min-width:401px) {

#container {
    width:auto;
}


}


@media screen and (max-width:399px) {

#container {
    width:auto;
}

#paragraph {
    width:auto; 
}
}

Getting desired min-width/line-wrapping behavior

3 Answers3