Optionally wrapping text

Question

I got some slogans that can either be displayed on a single line or multiple lines if wrapped at specific places. Is there a CSS option to respect a <br> tag only if necessary to fit the container width and leave it unwrapped otherwise?

For example

<div>
  They told me that<br> aesthetics matter.
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap — Petr Nečas, Jul 19 '20 at 15:14
This question has been asked many times before (e.g., ). Please search before posting. — Michael Bluejay, Jul 19 '20 at 15:30
Does this answer your question? [Specifying a preferred line break point in HTML text in a responsive design](https://stackoverflow.com/questions/18222409/specifying-a-preferred-line-break-point-in-html-text-in-a-responsive-design) — Michael Bluejay, Jul 19 '20 at 15:31
@user81993 Hey, hopping in real quick to check whether I solved your issue or do I need to ameliorate my skills? — s1834, Jul 20 '20 at 12:32

score 0 · Answer 1 · answered Jul 19 '20 at 15:33

You can use CSS code to break work

#content::after {
  content: "\a";
  white-space: pre;
}

<div id="content">They told me that</div>
<div id="break">aesthetics matter.</div>

and also you can define padding instead of height because padding expands the container according to its children and also prevent children to overflow the example is the following

#container {
  width: 300px;
  padding: 5px;
  background-color: grey;
}

<div id="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

score 0 · Answer 2 · answered Jul 19 '20 at 15:33

0

You can CSS property word-wrap: break-word; in div to solve your issue. And if it doesn't solve your issue, let me know in comments I will try my best to help you.

answered Jul 19 '20 at 15:33

s1834

433
2
8

Optionally wrapping text

2 Answers2