CODEWITHSUNDEEP
htmlcss
Zubair sadiq
Zubair sadiq

Reputation: 500

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>

Upvotes: 1

Views: 1511

Answers (4)

Frits
Frits

Reputation: 7614

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/

Upvotes: 3

Gopal Rajawat
Gopal Rajawat

Reputation: 101

Updated fiddle link. as said by shuvo, add white-space:normal to childern div

`https://jsfiddle.net/gopal280377/tdc300up/2/`

Upvotes: 2

Huy Chau
Huy Chau

Reputation: 2240

Remove wrong code of div parent:

<div overflow-x:auto; width="100%" style="white-space: nowrap">
 // Some thing
</div>

To:

<div width="100%" style="white-space: nowrap">
 // Some thing
</div>

Note: You can remove width="100%", because div block tag, width default is 100%.

And reset white-space for text-center class is:

.text-center {
   white-space: normal;
}

Upvotes: 1

Shuvo Habib
Shuvo Habib

Reputation: 2125

You should try white-space to be normal in the child.As you want to break the line..

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

Upvotes: 1

Related Questions