To handle text layout issues in CSS, use white-space properties to control wrapping and overflow properties to manage truncation. 1. Use white-space with values like normal, nowrap, pre-wrap, or pre-line to define how text wraps. 2. Apply text-overflow: ellipsis along with overflow: hidden and white-space: nowrap for single-line truncation. 3. For multi-line truncation, use display: -webkit-box, -webkit-line-clamp, and -webkit-box-orient, noting limited browser support. 4. Set min-width: 0 on flex items to allow text wrapping in narrow containers. 5. Choose between word-break: break-all or overflow-wrap: break-word depending on whether splitting words is acceptable. These methods provide reliable text layout control without JavaScript.

When dealing with text layout in CSS, wrapping and overflow are two common issues that can break your design if not handled properly. The key is to understand when text should wrap, when it should be cut off, and how to control those behaviors depending on the context.

When Text Won’t Wrap: Using white-space

Sometimes text runs off the screen or stretches a container wider than intended — especially when there’s no space in the content, like a long URL or a block of code.

To fix this, you can use white-space. Here are some common values:

• normal: Default behavior, collapses whitespace and wraps as needed.
• nowrap: Prevents wrapping entirely, forcing everything onto one line.
• pre-wrap: Preserves whitespace but allows wrapping.
• pre-line: Similar to pre-wrap, but collapses sequences of whitespace into a single line break.

For example:

.text {
  white-space: pre-wrap;
}

This is useful for preserving formatting while still allowing the text to wrap inside containers.

Truncating Overflowing Text

If you want to cut off text that overflows its container and show an ellipsis (...), you’ll need to combine a few properties.

Here's a typical setup for single-line truncation:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This ensures that any text that doesn’t fit will be replaced with an ellipsis instead of spilling out.

For multi-line truncation, you'll need a bit more:

.multi-line-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Keep in mind that -webkit-line-clamp only works in WebKit browsers (like Chrome and Safari), so it's best used where full cross-browser support isn't critical.

Making Sure Text Wraps Nicely in Layouts

Containers sometimes don’t respect text wrapping even when they should. This often happens when using flexbox or grid layouts.

One thing to watch out for: Flex items won’t shrink past their minimum content size by default. So if you have a narrow container with a long word, it might overflow.

To prevent that:

.container {
  min-width: 0;
}

Combined with overflow: hidden or text-overflow, this helps ensure the text respects the container size.

Also, remember that setting word-break or overflow-wrap can help with long words:

• word-break: break-all will split words at any character to fit inside the container.
• overflow-wrap: break-word tries to keep whole words intact but breaks them if necessary.

Both are handy in different scenarios — choose based on whether you prefer readability or strict space control.

That’s basically it. These tools give you solid control over how text behaves in different situations without relying on JavaScript or hacks. Just keep in mind browser quirks, especially with multi-line truncation, and test where needed.

The above is the detailed content of Controlling text wrapping and overflow in CSS. For more information, please follow other related articles on the PHP Chinese website!