text-overflow

div.hoge{
	text-overflow: ellipsis;
	overflow: hidden; /* This must also be specified at the same time. */
	white-space: nowrap; /* This must also be specified at the same time. */
}

Value	Description
clip	Does not display the ellipsis '…'. This is the initial value.
ellipsis	Displays the ellipsis '…'.

<div style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">This is a div element. Overflowing text will be truncated and '...' will appear at the end.</div>

※ Version data is based on MDN / Can I Use.

Long text can be truncated to display '…' at the end.

If specified on an inline element, 'overflow' does not take effect, so all text will be displayed.

<span style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">This is a span element. Since it is an inline element, the text is not truncated.</span>

In most cases you will use 'overflow:hidden;', but the display behavior changes depending on how 'overflow' is set.

When 'overflow:auto;' is specified, the text is truncated at the 'width' value, and no '…' is shown for the remaining text, but the text area becomes scrollable.

<div style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: auto;">This is a div element. The text is long, so it is truncated and '...' is displayed.</div>

As also explained in 'overflow', in common browsers there is no visible difference between 'auto' and 'scroll', so the same applies to 'text-overflow' with 'overflow:auto' and 'overflow:scroll'.

<div style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: scroll;">This is a div element. The text is long, so it is truncated and '...' is displayed.</div>

Although different from 'text-overflow', the following technique allows you to show '…' in multi-line text as well.

Only for webkit-based browsers like Chrome, Safari, and the Android default browser, you can use '-webkit-box-orient: vertical;' and '-webkit-line-clamp' without JavaScript to support multi-line text truncation. On desktop, this is difficult to use since Firefox and IE do not support it, but on mobile it works well since the Android default browser supports it.

div.hoge{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* Specify the number of lines after which to truncate and show '…' */
}

<div style="width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;">This is a div element. In webkit-based browsers, multi-line text can also be truncated and '...' displayed.</div>

'-webkit-line-clamp' is a property that displays '…' at the last line of the specified line count. To use it, the element must be set as a flexible box with '-webkit-box-orient'; otherwise '…' will not appear. If 'height' is not specified, '…' appears at the specified line count and all text beyond that is hidden.

However, if 'height' is specified and there is remaining display area beyond the line count specified by '-webkit-line-clamp', '…' is inserted at the specified line count, and the remaining text is shown without truncation in the leftover area. Therefore, when using this, either set 'height' to an exact value, or omit 'height' and only specify '-webkit-line-clamp'.

<div style="width: 240px; height: 200px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;">This is a div element. When both '-webkit-line-clamp' and 'height' are specified, '...' is displayed at the end of the specified line count, and if there is remaining display area, the rest of the text is shown there.</div>

If the text is shorter than the line count specified by '-webkit-line-clamp', '…' will not be displayed at the end of the text.

<div style="width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10;overflow: hidden;">This is a div element. If the text is shorter than the specified number of lines, '...' will not be displayed.</div>