A basic flexbox layout is displayed with an image next to text, aiming for this layout:
#container {
align-items: center;
background: black;
display: flex;
justify-content: center;
padding: 10px;
width: 500px; /* Dynamic */
}
#image {
background: white;
height: 50px; /* Dynamic */
margin-right: 10px;
width: 50px; /* Dynamic */
}
span {
color: white;
font-size: 40px;
overflow-wrap: anywhere;
}<div id="container">
<div id="image"></div>
<span>long_text_should_be_<br />allowed_to_break</span>
</div>However, in my scenario I need to use <wbr> instead of <br> which disrupts the centered alignment.
#container {
align-items: center;
background: black;
display: flex;
justify-content: center;
padding: 10px;
width: 500px;
}
#image {
background: white;
height: 50px;
margin-right: 10px;
width: 50px;
}
span {
color: white;
font-size: 40px;
overflow-wrap: anywhere;
}<div id="container">
<div id="image"></div>
<span>long_text_should_be_<wbr />allowed_to_break</span>
</div>I realize that this behavior is expected as line breaks do not adjust to text width within block elements. Despite working well with <br>, I am curious if it can be optimized to achieve similar results with <wbr> or other line break hints.
Objectives:
- Should function in a dynamic sizing environment, accommodating varying container and image dimensions
- Should default to
break-allbehavior when no line break hints are provided - Should accommodate text of any length, from 1 to n characters
- Only needs to support recent versions of Chrome with left-to-right Latin text