CSS text overflow does not display ellipsis
CSS Text Overflow Does Not Display Ellipses
In web development, text often exceeds the size of its container, requiring text overflow handling. A common approach is to use ellipsis to indicate truncation of text. However, sometimes we prefer to avoid displaying ellipsis when text exceeds its container size, allowing the text to appear entirely. This article will explain how to use CSS to achieve this effect.
white-space property
In CSS, you can use the white-space property to control how whitespace is handled within an element. This attribute has several common values:
normal: Default value. Collapses excess whitespace. Inline elements can only wrap between inline and floated elements.nowrap: No line wrapping occurs. Text is displayed on a single line. If a line is not wide enough, the text will overflow.pre: Preserve whitespace and display text according to the source code format.pre-wrap: Preserve whitespace and allow line wrapping.pre-line: Collapses excess whitespace and allows line wrapping.
We can use the white-space property to avoid displaying ellipsis when text overflows. When set to pre or pre-wrap, the text is displayed in its entirety without being truncated.
.text {
white-space: pre;
}
Example
The following is a simple example showing how to use the white-space property to achieve the effect of not displaying ellipsis when text overflows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Without Ellipsis</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
.text {
white-space: pre;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, nulla in viverra fringilla, nisi justo
Ullamcorper sapien, et aliquam justo libero at purus.
</div> </div>
</body>
</html>
In the above example, we defined a container, .container, and set its width to 200px. We also used white-space: pre; to prevent ellipsis from appearing when text overflows.
Running Results
When you open the above example code in a browser, you’ll see that the text content is fully displayed within the container, with no ellipsis appearing. This is how the white-space property is used to prevent ellipsis from appearing when text overflows.
Summary
Through this article, you’ve learned how to use the white-space property to prevent ellipsis from appearing when text overflows. This approach can better meet design requirements in some cases, ensuring that the text content is fully displayed to users and improving the user experience.