How to move part of a div/span to new line? [duplicate] - html

Question

This question already has answers here:
How to apply padding to every line in multi-line text?
(5 answers)
Closed 3 months ago.
.wrapper {
display: flex;
flex-direction: column;
gap: 20px;
padding: 50px; }
.wide-container, .narrow-container {
flex: none;
background-color: #f7f7f7;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
border: 1px #c2c2c2 solid;
}
.wide-container {
width: 600px;
}
.narrow-container {
width: 300px;
}
.flex {
display: flex;
flex-wrap: wrap;
gap: 10px 0;
}
.text {
flex: none;
padding: 5px 2px;
background-color: salmon;
color: white;
}
<div class="wrapper">
<div class="wide-container">
<div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
</div>
<div class="narrow-container">
<div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
</div>
</div>
I need to apply some styles to piece of a text, and it should be inside of a flex box, because I need some of its features. The problem is that when there is not enough space, text will overflow:
So, I need to split text somehow, to keep the styling on a new line like this (did it manually here):
UPD:
Thanks for the answers, but the problem is a little bit more complex than it looks at first glance. Solution in answers (so far) leads to this result:
Which means that line breaks inside of a .text container. If you compare this result with the result I need (screenshot above), you will understand the issue.

Answer 1

use word-break:break-all; or word-break: break-word;
.wrapper {
display: flex;
flex-direction: column;
gap: 20px;
padding: 50px; }
.wide-container, .narrow-container {
flex: none;
background-color: #f7f7f7;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
border: 1px #c2c2c2 solid;
}
.wide-container {
width: 600px;
}
.narrow-container {
width: 300px;
}
.flex {
flex-wrap: wrap;
flex:none;
gap: 10px 0;
}
.text {
flex: none;
word-break: break-word;
padding: 5px 2px;
line-height:35px;
background-color: salmon;
color: white;
}
<div class="wrapper">
<div class="wide-container">
<div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
</div>
<div class="narrow-container">
<div class="flex">
<span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 3</span>
</div>
</div>
</div>

Answer 2

Remove flex from text class and it will work.
.text {
padding: 5px 2px;
background-color: salmon;
color: white;
}
https://codepen.io/IChoseTheRedPill/pen/zYaRjZb

Answer 3

Based on your description you are looking for the </br> HTML element. Just added a </br> in your example.
However, removing flex: none from your .text class is a much more elegant solution to your problem, as suggested in another answer.
In addition, to get the "highlight" effect that you want you can't apply a background-color to the whole .text class.
.wrapper {
display: flex;
flex-direction: column;
gap: 20px;
padding: 50px; }
.wide-container, .narrow-container {
flex: none;
background-color: #f7f7f7;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
border: 1px #c2c2c2 solid;
}
.wide-container {
width: 600px;
}
.narrow-container {
width: 300px;
}
.flex {
display: flex;
flex-wrap: wrap;
gap: 10px 0;
}
.text {
padding: 5px 2px;
line-height: 1.5;
color: white;
}
.highlight {
background-color: salmon;
}
<div class="wrapper">
<div class="wide-container">
<div class="flex"><span class="text"><span class="highlight">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></span></div>
</div>
<div class="narrow-container">
<div class="flex"><span class="text"><span class="highlight">Lorem ipsum dolor sit amet consectetur, </span><span class="highlight">adipisicing elit.</span></span></div>
</div>
</div>

Answer 4

This worked correctly for me when flex was disabled
.text {
background-color: salmon;
color: white;
line-height: 2em!important;
padding: 3px 0px;
}