Html Question posted in
Some basic documentation can be found here.

Html – Conditional line break only if no "natural" break would occur

I have a rather long text inside an intrinsically sized div. For visual reasons I’d like the div to break at a given point but only when no "natural" line break would occur "before" this point:

enter image description here

I could achieve this by adding a <br>, placing the text into multiple divs etc. but I found no way to ignore this break, when the div shrinks below the point where it would naturally break "before" that preferred break point:

enter image description here

Is there any technique to achieve this with pure CSS & HTML?

Example code

Here’s an example with the "static" line break via <br> which shows the line break at the correct position when the div is very wide but does not work as required when the div shrinks (second screenshot above):

<div class="parent">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non orci
    in nunc venenatis luctus et eget mauris.
    <br>
    Pellentesque nec ante dignissim, malesuada tortor ac, rhoncus ante.
  </div>
</div>

.parent {
  display: flex;
  font-family: Inter;
  font-size: 18px;
}

.content {
  background: yellow;
  padding: 8px;
}

Codepen Playground

Additional note

I’m specifically looking for a solution which does not require any fixed sizing like max-width div, media queries etc. b/c they would all be bound to the used font, font-size, browser zoom level etc. and could break e.g. when the user overrides the font(size) in his browser settings etc.

Tags:

2

Answers


  1. 0

    You could use a regular <br> tag and hide it, when the viewport size gets smaller.

    .conditional-br {
  display: block;
}

@media screen and (max-width: 60em) {
  display: none;
}
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non orci in nunc veneatis luctus et eget mauris.<br class="conditional-br">
Pellentesque nec ante dignissim, malesuada torror ac, rhoncus ante.
</p>

    Maybe you have to try out for yourself which breakpoint fits best.

    Login or Signup to reply.
  2. 0

    Something like this?

    .parent {
  display: flex;
  font-family: Inter, sans-serif;
  font-size: 18px;
}

.content {
  background: yellow;
  padding: 8px;
  word-break: break-word;  /* Ensures long words break if needed */
  overflow-wrap: anywhere; /* Allows breaking opportunities */
}
    <div class="parent">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non orci in nunc venenatis luctus et eget mauris.&#8203;Pellentesque nec ante dignissim, malesuada tortor ac, rhoncus ante.
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search