Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to resize the width of a div if a word wrap happened?

Tags:

Is it possible to resize a div element when word wrap occurs? For demonstration purposes, let me use a fiddle from a similar question:

<div class="mypost">
    <div class="test">I represent the imagdfv fdvdsdfsdfve.</div>
</div>

CSS:

.mypost {
    border: 1px solid Peru;
    margin: auto;
    min-width: 200px;
    display: inline-block;
    background: red;
}
.test {
    margin: 10px;
    background: cyan;
}

If you make the window smaller so that word wrap occurs, you will see that there is a blue empty space to the right. When the word wrap occurs I want the blue to decrease until it reaches the last letter of the first line.

word wrapped text in a element with a blue background with empty space

(Here I am forcing word wrap and I want the blue to shrink)

Is this possible?

like image 997
user3711421 Avatar asked Nov 16 '16 22:11

user3711421


People also ask

How do I make a div auto adjust width?

Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.

How do I force wrap text in a div?

If you've faced the situation when you need to wrap words in a <div>, you can use the white-space property with the "pre-wrap" value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you'll need the word-wrap property.

How do I keep my div from wrapping?

Alternative way to do this is to use the display:inline-block . Where row element has white-space:nowrap. inline-block makes the element inline but preserves the settings such as width, height, top and bottom margins, paddings.

How do you stop word-wrap in CSS?

If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).


2 Answers

By default div elements are block-level elements meaning they occupy 100% of the width of its parent element. As the other answer shows you can use javascript to set the width of the div according to the content.

However, if you are only concerned with constraining the background color to be within the boundaries of inline content (i.e. text and images), you could just make the element inline with the display: inline declaration. You would have to remove the margin and instead add padding to the parent element.

Here is an example I created from modifying your code. I added display: inline to .test, removed margin: 10 from .test, and added padding: 10 to .mypost. I also had to play around with line-height and font-size to make sure there is no gap between the lines.

.mypost {
    border: 1px solid Peru;
    margin: auto;
    min-width: 200px;
    width:300px;
    display: inline-block;

    background: red;
    font-size:18px;
    line-height:20px;
    
    padding:10px;
    
}
.test {
    background: cyan;
    display:inline;
}
<div class="mypost">
    <div class="test" contenteditable="true">
        EDIT ME..... Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div>
</div>

The snippet is an interactive demo. You can directly edit the content of the div to see how word wrap behaves.

I have also found this duplicate question but it didn't have any satisfactory answers: How to remove extra space caused by word-wrap in shrunk to fit element?

like image 64
Cave Johnson Avatar answered Sep 23 '22 16:09

Cave Johnson


tl;dr: No.

Once word wrapping occurs, the block-level element containing the text is considered to be as wide as possible to fill its container regardless of where the text breaks.

One can use javascript to find a minimum-width box of the starting height but this is inefficient due to repeated redraws and it's less friendly to CSS:

target = document.getElementsByClassName('test')[0];
height = target.clientHeight;
minWidth = 1;
maxWidth = target.clientWidth;
while(maxWidth - minWidth > 1) {
  var newWidth = (minWidth + maxWidth) / 2;
  target.style.width = newWidth + "px";
  if(target.clientHeight > height) {
    minWidth = newWidth;
  }
  else {
    maxWidth = newWidth;
  }
}
target.style.width = maxWidth + "px";
.mypost {
    border: 1px solid Peru;
    margin: auto;
    width: 300px;
    display: inline-block;
    background: red;
}
.test {
    margin: 10px;
    background: cyan;
}
<div class="mypost">
    <div class="test">I represent the imagdfv fdvdsdfsdfve.</div>
</div>
like image 34
Ouroborus Avatar answered Sep 26 '22 16:09

Ouroborus