CODEWITHSUNDEEP
htmlcss
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Word wrap text in child div if it doesn't fit parent div width

<div class='jfmfs-friend' id='123'>
  <input type='checkbox'/>
  <img src='id.jpg'/>
  <div class='friend-name'>Himanshu Yadav</div>
</div>

I want to wrap text inside friend-name div. I tried 

div.friend-name  {
    margin-left: 10px;
    white-space: pre-wrap;
}

Here is the parent div css:

.jfmfs-friend {                
    cursor:pointer;
    display:inline-block;
    float:left;
    height:56px;
    margin:3px;
    padding:4px;
    width:176px;
    border: 1px solid #FFFFFF;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -webkit-user-select:none;
    -moz-user-select:none;

}

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

Upvotes: 0

Views: 4702

Answers (3)

michaelt
michaelt

Reputation: 182

So I added all your code into the following jsbin.com example to show why it doesn't work for the example given. I added a case where word wrapping will be exercised. You may check it out here: http://jsbin.com/osopid/1 and the code here http://jsbin.com/osopid/2/edit

  <div class='jfmfs-friend' id='123'>
  <input type='checkbox' click='width()'/>
  <img src='id.jpg'/>
    <!-- 78px demonstrates no wrapping of the following div  -->  
    <div id='restrictedWidth' class='friend-name'>Himanshu Yadav</div>
    <div id='dbg'></div>
  </div>

  <div class='jfmfs-friend' id='123'>
  <input type='checkbox' click='width()'/>
  <img src='id.jpg'/>
    <!-- 164px demonstrates wrapping of the following div -->
    <div id='restrictedWidth2' class='friend-name'>Himanshu Yadav with more text proving that word wrap is working</div>
    <div id='dbg2'></div>
  </div>

Note the word-wrap added :

.jfmfs-friend {                
    cursor:pointer;
    display:inline-block;
    float:left;
    height:56px;
    margin:3px;
    padding:4px;
    width:176px;
    border: 1px solid #FFFFFF;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -webkit-user-select:none;
    -moz-user-select:none;

}

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

div.friend-name  {
    margin-left: 10px;
    white-space: pre-wrap;
    word-wrap: normal;
    border: 1px solid #000000;
}

Added some jquery to print out the widths, so that we may inspect when an item should wrap:

$('#dbg').html('<div>'+$('#restrictedWidth').css('width')+'</div>');

$('#dbg2').html('<div>'+$('#restrictedWidth2').css('width')+'</div>');

I tested this all out in chrome, what browser are you using?

Upvotes: 1

Anthony Forloney
Anthony Forloney

Reputation: 91786

Check out the word-wrap property introduced in CSS3. By using the break-word value should word wrap the text within the container.

Upvotes: 0

michaelt
michaelt

Reputation: 182

Try this, though you may want to reconsider the height:

div.friend-name  {
    margin-left: 10px;
    white-space: pre-wrap;
    word-wrap: normal;
}

Upvotes: 0

Related Questions