Within this example
<html>
<head>
<style>
.q_show_spaces {
white-space: pre-wrap;
}
.q_inline {
display: inline;
}
.q_no_wrap {
white-space: pre;
}
</style>
</head>
<body>
<div style="width:400px;border:solid 1px">
<div class="q_show_spaces"><div class="q_inline">To test long string aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">long string aaaaaaaaaaaaaaaaa aaaaaaabbb, </div></div><div class="q_inline">by like terms</div></div>
</div>
<br />
<br />
<div style="width:400px;border:solid 1px">
<div class="q_show_spaces"><div class="q_inline">To test long string aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">long string aaaaaaaaaaaaaaaaa aaaaaaabbb,</div></div><div class="q_inline"> by like terms</div></div>
</div>
</body>
</html>
In the first scenario, the content is exceeding the div boundaries. However, in the second instance, the content fits properly within the div after moving the space outside.
How can this be resolved? Without relocating the space outside or removing any div or styles on the div, kindly propose a new style that overrides these issues and functions correctly.
Apologies for the improper HTML formatting.