CSS (Cascading Style Sheets) is a language for styling and formatting web pages, allowing control over text display, including line breaks. In this article, we will explore various ways of text wrapping using CSS and provide code examples.
Text wrapping is an important aspect when creating web pages, especially when dealing with text that exceeds the container width. If text is not wrapped, it may overflow the container boundaries and disrupt the page layout.
CSS offers several properties to control text wrapping:
1. `word-wrap: break-word;` - This property allows breaking words that do not fit within a line onto the next line within the container. Here's an example of using this property:
```css
.container {
width: 300px;
word-wrap: break-word;
}
```
2. `overflow-wrap: break-word;` - This property works similarly to `word-wrap` but prefers breaking words at syllables to maintain their integrity. Here's an example of using this property:
```css
.container {
width: 300px;
overflow-wrap: break-word;
}
```
3. `hyphens: auto;` - This property automatically adds hyphens to words for more grammatically correct text wrapping. However, this property has limited support in web browsers. Here's an example of using this property:
```css
.container {
width: 300px;
hyphens: auto;
}
```
4. `text-overflow: ellipsis;` - This property allows truncating non-wrapped text and adding ellipsis at the end to indicate that part of the text has been omitted. Here's an example of using this property:
```css
.container {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
This property is especially useful when dealing with short lines that cannot be fully displayed inside the container.
It's important to note that to achieve proper text wrapping in CSS, the container width should be set to indicate where the text should wrap onto a new line, and appropriate values should be assigned to the mentioned properties.
In conclusion, CSS offers several properties to control text wrapping on web pages. The choice of a specific property depends on the desired effect and compatibility with various web browsers.