How can I wrap or break long text/word in a fixed width span?

html

responsive-design

css

web-development

byAlex Kataev·Dec 26, 2024

For wrangling text into a manageable format within a fixed-width <span>, you can employ the CSS properties overflow-wrap: break-word; and white-space: normal;. These properties break long strings of text into pieces and fit text into the container based on space characters.

.span-wrap {
  width: 200px; /* you shall not pass (200px)! */
  overflow-wrap: break-word; /* do or do not, there is no try (to fit) */
  white-space: normal; /* let it flow, let it flow 🎶 */
}

<span class="span-wrap">ExtraLongWordThatNeedsWrapping</span>

The text will be tied down to the 200px width of your span, lines breaking where necessary to avoid spilling out of the container.

Breaking it down: `overflow-wrap` vs `word-break`

Both CSS properties overflow-wrap: break-word; and word-break: break-all; solve the problem of long, space-less text strings. However, there's a key difference:

overflow-wrap: break-word; honors word boundaries, breaking words cautiously.
word-break: break-all; has no patience for boundaries, slicing through words without a second thought.

Unless your design needs an aggressive text-break, overflow-wrap is your friend.

CSS inheritance: Span within elements

When our dependable span is nested within multiple elements, our wrapping rules should still apply. An example to illustrate:

/* List item, meet span */
li span {
  display: block; /* not all heroes wear capes... or borders */
  width: 100px; /* a cozy apartment for our text */
  overflow-wrap: break-word; /* the text will bend, it will not break 💪 */
}

With these rules, no matter what HTML elements surround your span, the text inside will obey the wrapping constraints.

Pragmatic check - We got this!

While text wrapping feels like a breeze, it's important to consider real-world scenarios & factors:

Fixed dimensions: Span needs a defined width to decide how many words it can host per line.
Responsive design: Don't forget to check how it behaves on different screen sizes - mobile, tablet, desktop. Your users will appreciate it!
Accessibility: Make sure your split text is legible and doesn't hamper readability.

Code presentation - Because cleanliness is godliness

Always ensure your CSS code is properly formatted with correct indentation and spacing. For Stack Overflow, encapsulate your CSS inside style tags and use pre and code blocks for easy reading.

Dealing with user content: Expect the unexpected

If your span hosts user-generated content, remember to battle-test it with various text lengths and characters - it's like preparing our superhero span for the wild world out there.

Doing a demo: Show, don't just tell

A live demonstration can seal the deal. Platforms like JSFiddle, CodePen, or StackBlitz are perfect for showing your solution in action, making it easier for others to understand and appreciate your work.

explain-codes / Html / How can I wrap or break long text/word in a fixed width span?

Linked

Is there a way to word-wrap long words in a div?



How to not wrap contents of a div?



Specifying a preferred line break point in HTML text in a responsive design



Denoting a preferred place for a line break



How can I force a long string without any blank to be wrapped?

