Word Wrap a Link So It Doesn't Overflow Its Parent Div Width

Word wrap a link so it doesn't overflow its parent div width

The following is a cross browser compatible solution:

#permalink_section
{
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

From How do I wrap text with no whitespace inside a <td>?

Check working example here.

Word-wrap doesn't respect parent's width for long non-break text

Simply set max-width:100% to .parent so this one respect the width of .container then rely on flex and your element will shrink by default. Also don't forget min-width:0 on the element itself to enable the element to shrink.

.container {  width: 300px;  display: flex;  flex-direction: column;  align-items: flex-start;  padding: 1em;  background-color: blue;}
.parent{  display:flex;  flex-direction:row;  flex-wrap:nowrap;  padding:1em;  background-color:red;  box-sizing:border-box;  margin-bottom: 1em;  max-width:100%; /*Added this */}.name{  background-color:mistyrose;  width: 70px;  padding: 1em;}.msg{  background-color:powderblue;  max-width:30vw;  min-width:0; /*addedd this*/  padding:.5em;  word-wrap:break-word;}

<div class='container'> <div class="parent">    <div class="name">      David    </div>    <div class="msg">    How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? 
    </div>  </div>  <div class="parent">    <div class="name">      Hannah    </div>    <div class="msg">    somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
    </div>  </div></div>

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

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?

How to break a long word inside a div, based on the div's parent width?

You don't need all those white-space

Instead use

.wordwrap { 
  word-break : break-all;
}

#parent {  width: 500px;  height: 500px;  border: solid 1px;  position: relative;}#child {  top: 20px;  left: 300px;  border: solid 1px;  position: absolute;}.wordwrap {  word-break: break-all;}

<div id="parent">  <div id="child" class="wordwrap">    asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs  </div></div>

How to make span wrap words without defining a width or max-width on the container div?

After some investigating, our webdesigner has found a solution involving putting a flexbox around the span. I'm sharing the solution below for anyone else with this problem.

/*Relevant CSS:*/
.l-status-message-wrapper {  height: auto;  margin-left: 5px;  margin-top: 2px;  min-height: 15px;}
.l-status-message-wrapper--dialog {  margin-left: 0px;  display: block;  word-wrap: break-word;}
.c-global-message {  min-height: 15px;  color: #a5cf42;  font-size: 11px;  font-weight: bold;  text-transform: uppercase;}
.c-global-message--error {  color: #e31d25;}
.dijitDialog {  background: #eee;  border: 1px solid #d3d3d3;  -webkit-box-shadow: 0 5px 10px #adadad;  padding: 0;}
.dijitDialog {  position: absolute;  z-index: 999;  overflow: hidden;}
.dijitDialogTitleBar {  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;  vertical-align: middle;}
.dijitDialogTitleBar {  background: #fafafa url(images/titleBar.png) repeat-x top left;  padding: 5px 6px 3px 6px;  outline: 0;}
.dijitDialogTitleBar {  cursor: move;}
form {  width: 200px;  height: 200px;  background-color: green;}
/* Limits the width of an element so it does not exceed the width of the largest element  * on the same DOM level. It will adjust the width of its contents in cases where the parent * element has no width value set. (e.g. A dialog message span that may not exceed the width of a accompagnied c-panel-dialog) *  * Always use in a hierarchical markup combination (l-dynamic-width-wrapper > l-dynamic-width-wrapper-items) */.l-dynamic-width-wrapper { display: flex; }
.l-dynamic-width-wrapper > .l-dynamic-width-wrapper-items {   flex-grow: 1;   width: 0;}

<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">   <span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>    </span>  </div>  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">    <div id="machineParameterDialogContents" class="machineParameterDialogContents">      <div class="l-dynamic-width-wrapper">       <div class="l-dynamic-width-wrapper-items">       <span class="l-status-message-wrapper l-status-message-wrapper--dialog">        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">          error: <span>Action not successful. Please correct the validation errors</span>        </span>      </span>      </div>      </div>      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">
      </form>    </div>  </div></div>

How to make divs wrap *only* at their max-width, and not because its parent container is being overflown?

Don't use left to position the element but consider translate instead. The left property will restrict the width of your element.

/* Relevant parent and child styles */

.parent {
  position: relative;
  width: 500px;
  height: 400px;
}

.child {
  position: absolute;
  max-width: 250px;
}

/* Individual positioning of child elements */

#fine {
  top: 30px;
  transform: translateX(100px);
}

#wrapped {
  top: 90px;
  transform: translateX(400px);
}

#unwrapped {
  top: 200px;
  left: 170px;
}
#extra {
  top: 300px;
  left: 170px;
}

/* The rest is only styles to make the example easier on the eye */

body {
  background-color: hsl(0, 0%, 90%);
  margin: 0;
  padding: 24px;
}

.parent {
  background-color: white;
  border: 2px solid grey;
}

.child {
  padding: 12px;
  background: yellowgreen;
}

<div class="parent">
  <div id="fine" class="child">
    Text should be wrapped normally with the max-width of the child, like this
  </div>
  <div id="wrapped" class="child">
    This text will be wrapped much earlier though because it is running out of the parent container
  </div>
  <div id="unwrapped" class="child">
    "white-space: nowrap" only prevents *all* wrapping
  </div>
  
   <div id="extra" class="child">
    short text
  </div>
</div>

how to force break words that exceed width of parent div

By default, it should wrap (example 1)

use word-break: keep-all; (example 2)

But when a word is too long you need to use overflow-wrap: break-word; (example 3)

p {  width: 140px;  border: 1px solid #000000;}
p.test1 {  word-break: keep-all;}
p.test2 {  overflow-wrap: break-word;}

<p class="test">This paragraph contains some text. This line will-break-at-hyphens. verylongtextnonstoplolstillnotdonesorry</p>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens. verylongtextnonstoplolstillnotdonesorry</p>
<p class="test2">This paragraph contains some text. The lines will break at any character. verylongtextnonstoplolstillnotdonesorry</p>

Is there a way to word-wrap long words in a div?

Reading the original comment, rutherford is looking for a cross-browser way to wrap unbroken text (inferred by his use of word-wrap for IE, designed to break unbroken strings).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   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 */
}

I've used this class for a bit now, and works like a charm. (note: I've only tested in FireFox and IE)

How to break text to new line when the width of parent div of it received to full screen?

You can wrap both divs into a container and set it's display to flex. Also, add flex property to the .div-2 and set it to 1.

.div-1 {
  width: 200px;
}

.div-2 {
  flex: 1;
}

.container {
  display: flex;
  width: 100%;
}

<div class="container">
 
  <div class='div-2'>
    <h3>Text</h3>
  </div>
   <div class='div-1'>
  </div>
</div>

If you want your content to be floating right, set the container width and float properties accordingly.

---

Related Topics