title: CSS Forced Line Break/No Line Break Related
date: 2013-03-31 13:48:58
tags:
- CSS
- Code
- Tinkering
categories: - Computer Networking
id: 1636
alias: 20130331901
The original link to this article is as follows:
CSS Forced Line Break/No Line Break Related
2022-12-22: This note is almost 10 years old...
white-space: nowrap; —— Forces all text to be displayed on the same line, merging any excess whitespace between texts until the end of the text or encountering a br object.
overflow: hidden; —— Hides overflow content.
text-overflow: ellipsis; —— Displays an ellipsis (...) when the text inside an object overflows.
Note: The text-overflow property is only an annotation for whether to display an ellipsis when the text overflows. It does not have any other style property definitions. In order to achieve the effect of displaying an ellipsis when the text overflows, we must also define: forcing the text to be displayed on one line (white-space: nowrap) and hiding the overflow content (overflow: hidden). Only then can we achieve the effect of displaying an ellipsis for overflowing text.
————————————————————————————————————
word-wrap: break-word; —— The content will wrap within the boundaries. If necessary, line breaks are allowed within words.
————————————————————————————————————