Text Flow Control and Cursors

text-overflow Property

Property	Usage and Effect	Values	Recommendations
text-overflow	Specifies what should occur when content goes outside of an element; ideally you indicate that content continues by using ellipsis.	`clip` (Content is cut off) `ellipsis` (Three dots are used to show that content continues) `string` (Use the given string of characters to replace clipped content)	Useful in cases where width is limited and text is likely to be substantial; also bring in `overflow` and `white-space`.

text-overflow Example

See the Pen Text-Overflow by Jason Withrow (@jwithrow) on CodePen.

word-wrap / overflow-wrap Properties

Property	Usage and Effect	Values	Recommendations
word-wrap / overflow-wrap	Wraps long words to the next line and adjusts spacing for other words so they do not break in the middle. The specification also details certain behavior for Chinese, Japanese, and Korean (CJK) text when this is used. This property is helpful when content is forcing a scrollbar or breaking a column width, such as a lengthy spelled-out email address in a small column.	`normal` (The default; words do not wrap) `break-word` (The word wraps when the edge of the container is reached)	Sometimes you have long spelled-out email addresses or file names in small areas of the layout; this property is very helpful in those cases. `word-wrap` was the original property name. It was renamed `overflow-wrap`.

word-wrap Example

See the Pen Word-Wrap / Overflow-Wrap by Jason Withrow (@jwithrow) on CodePen.

word-break Property

Property	Usage and Effect	Values	Recommendations
word-break	Wraps characters to the next line when the width limit is reached, regardless of location within the word. Has no special rules for Chinese, Japanese, and Korean (CJK) text. This property is helpful when content is forcing a scrollbar or breaking a column width, such as a lengthy spelled-out email address in a small column.	`normal` (The default; words break normally) `break-all` (Lines can break between any two letters) `keep-all` (Breaks between pairs of letters are not allowed)	This applies to similar scenarios as `word-wrap` / `overflow-wrap`.

word-break Example

See the Pen Word-Break by Jason Withrow (@jwithrow) on CodePen.

white-space Property

Property	Usage and Effect	Values	Recommendations
white-space	Determines how spaces in element content are rendered. This property allows you to apply the special characteristics of the `<pre></pre>` tags and the `nowrap` attribute via CSS. The code examples in these lectures use `white-space: pre-wrap` to preserve white space yet still wrap to a new line when the container is too narrow.	`normal` (The default; only one space between characters is rendered) `pre` (Spaces and newlines are preserved, just like the pre tag) `pre-wrap` (Space and newlines are preserved; wrapping occurs when container width reached) `pre-line` (Space is NOT preserved but newlines in the source code cause wrapping in output) `nowrap` (Keeps text on the same line unless tags cause a line break, just like the nowrap attribute) `inherit` (Use the white-space setting of the parent element)	The difference between `pre` and `pre-wrap` is that `pre` content keeps going past the width of the container element, while `pre-wrap` causes wrapping once the width of the container element is reached. For this reason, `pre-wrap` is more flexible and is therefore preferable.

white-space Example

See the Pen White-Space by Jason Withrow (@jwithrow) on CodePen.

cursor Property

Property	Usage and Effect	Values	Recommendations
cursor	Determines the cursor used when an element is moused over.	`default` (Use the default cursor for the element) `auto` (Allow the browser to determine the cursor to use) `crosshair` (Renders as a crosshair) `pointer` (Renders as a pointer/hand) `move` (Renders as arrows pointing four directions - top, bottom, left, right) `e-resize` (Renders as a double-sided horizontal arrow) `ne-resize` (Renders as a double-sided arrow pointing diagonally to the top right / bottom left) `nw-resize` (Renders as a double-sided arrow pointing diagonally to the top left / bottom right) `n-resize` (Renders as a double-sided vertical arrow) `se-resize` (Renders as a double-sided arrow pointing diagonally to the bottom right / top left) `sw-resize` (Renders as a double-sided arrow pointing diagonally to the bottom left / top right) `s-resize` (Renders as a double-sided vertical arrow) `w-resize` (Renders as a double-sided horizontal arrow) `text` (Renders as a vertical bar, like a text input prompt) `wait` (Usually renders as an hourglass; on Mac OS it may render as a watch) `help` (Renders as a question mark, potentially with another icon beside the question mark) `progress` (Renders as an arrow with an hourglass on most systems) `not-allowed` (Renders as a circle with a line through it) `no-drop` (Renders as a circle with a line through it; in old browsers it may also include a hand) `vertical-text` (The text icon oriented horizontally rather than vertically) `all-scroll` (Renders as arrows pointing four directions - top, bottom, left, right) `col-resize` (Renders as two vertical bars with arrows pointing to the left and right) `row-resize` (Renders as two horizontal bars with arrows pointing to the top and bottom) `url(filename)` (Renders a custom cursor) `none` (No cursor is shown) `hand` (Proprietary value used by very old browsers; use `pointer` instead)	Limited and thoughtful usage is recommended; you can really confuse a user with an inappropriate cursor. The `help` cursor is sometimes used for elements with a descriptive `title` attribute, such as `<abbr></abbr>`. Multiple custom graphical cursors can be specified, separated by commas. Be sure to give a generic cursor as the last option, in case none of the others can be found or used. Custom cursors are typically in .cur file format; Gecko-based browsers also support .png and .gif Be careful of the `wait` and `progress` cursors, as users expect something to be occurring if they see those cursors.

cursor Example

See the Pen Cursors by Jason Withrow (@jwithrow) on CodePen.