Menu
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.
(Here I am forcing word wrap and I want the blue to shrink)
Is this possible?
997
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.
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.
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.
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).
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?
64
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
