how to make div take up the rest of the space without overflowing?
Question
I have 2 divs side by side where the red one take up the remaining space
but it overflows when the inside elements are too long like this:
#wrapper{ width:50%; display:flex; height:10rem; background-color:yellow; } #wrapper div{ height:5rem; }.second { flex: 1; }
<div id="wrapper"> <div style="background: blue">short version</div> <div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div> </div>
I tried overflow-wrap: anywhere; but there are browser compatibility issues plus how do I get it to ellipsis if overflowing at the bottom?
Preferably to look like this:
3 answers
solution1
0 2021-12-02 15:31:19
Are you looking for the value break-word of overflow-wrap ?
The compatibility is good between browser, except for IE of course.
.example {
overflow-wrap: break-word;
}
Edit: Flexbox need min-width:0; for overflow-wrap to work (see here ).
Here is the full working code:
<html>
<head>
<style>
#wrapper{
width:50%;
display:flex;
height:10rem;
background-color:yellow;
}
#wrapper div{
height:5rem;
}
#wrapper div.second {
flex: 1;
overflow-wrap: break-word; /* breaks long words */
min-width: 0; /* necessary for flexbox */
}
</style>
</head>
<body>
<div id="wrapper">
<div style="background: blue">short version</div>
<div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
</div>
</body>
</html>
solution2
0 2021-12-02 16:40:35
You can use overflow: hidden; in css like so:
#wrapper {
overflow: hidden;
}
Here is the full code:
#wrapper { width: 50%; display: flex; height: 10rem; background-color: yellow; overflow: hidden; } #wrapper div { height: 5rem; }.second { flex: 1; }
<div id="wrapper"> <div style="background: blue">short version</div> <div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div> </div>
solution3
0 2021-12-02 17:01:22
overflow-wrap: break-word; min-width:0; will work. Another way is to use word-break: break-all : https://codepen.io/SergeiMinaev/pen/MWEwvre .
I've also added ellipsis to this example. One thing about ellipsis: the number of the line to which the '...' will be added must be hardcoded, so you'll have to specify fixed height of the container.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.