CSS Word Break Hyphens
User
break long word that not fit in container and add – css
Assistant
To break a long word that doesn't fit into a container and add a hyphen (`-`) where the break occurs, you can use the `CSS` property `word-break` along with `hyphens`. Here's the CSS you need:
.container {
word-wrap: break-word; /* Ensures long words break onto the next line */
word-break: break-word; /* For compatibility */
overflow-wrap: break-word; /* Alternative to word-wrap for newer browsers */
hyphens: auto; /* Adds hyphens at appropriate breakpoints */
}### Explanation of Properties:
1. **`word-wrap: break-word;`**
Ensures that the long word will wrap to the next line if it exceeds the container's width.
2. **`word-break: break-word;`**
Similar to `word-wrap`, it handles breaking long words for older browser compatibility.
3. **`overflow-wrap: break-word;`**
This is the newer and more standardized version of `word-wrap`.
4. **`hyphens: auto;`**
Adds hyphens at the appropriate points within the word when it breaks across lines.
### Usage Example:
<div class="container">
Thisisaverylongwordthatdoesnotfitinthecontainer.
</div>### Styling for `.container`:
.container {
max-width: 300px;
border: 1px solid #ddd;
padding: 10px;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
}This will ensure the long word breaks properly and a hyphen is added where the word is split.