Zubair sadiq Zubair sadiq - 6 months ago 16
CSS Question

Three div in row and text of div break line when text exceeds div limits

I am using

white-space: nowrap;
in parent div which is sticking it's child div's in a row.

In the child div's I use
word-wrap: break-word;
which is not working inside of
white-space:nowrap;
.

My expected result is that all divs in a row even they reach screen limit but when div text exceed div width limit text line break to next line.

Fiddle Link



<div overflow-x:auto; width="100%" style="white-space: nowrap">
<div style="display: inline-block; width: 200px; border-right: solid #778899">

<div style="padding: 0 10px; background-color: white; height: 130px; overflow-x: hidden;">
div1
<p class="text-center" style="word-wrap: break-word;">
datasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

</p>
</div>
</div>
<div style="width:200px; display: inline-block; border-right: solid #778899;">

<div class="pd-5" style="background-color: white; height: 130px; overflow-x: hidden;">

div2
<p class="text-center" style="word-wrap: break-word;">
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssss
</p>

</div>
</div>
<div style="width: 200px; display: inline-block; border-right: solid #778899;">

<div class="pd-5" style="background-color: white; height: 130px; overflow-x: hidden;">

div3
<p class="text-center" style="word-wrap: break-word;">
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>

</div>
</div>
</div>




Answer

You can use white-space:pre-wrap;.

Here's an updated fiddle https://jsfiddle.net/tdc300up/1/

Here's the CSS code I used to solve it:

div > div > div { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Alternatively, you could also use

div { 
   white-space: normal;
}

as show in this fiddle here: https://jsfiddle.net/tdc300up/3/

(take note that you don't need all of the additional pre-fixes here thanks to better support - see https://css-tricks.com/almanac/properties/w/whitespace/#browser-support)

Edit

As mentioned by WorkWe in the comments, another fix that you could try is removing the white-space:nowrap; from the main parent container (if it is not required for something else).

You can see an example fiddle here: https://jsfiddle.net/tdc300up/4/