Home > Web Front-end > CSS Tutorial > How to Make Text Overflow Ellipsis Work in Table Cells?

How to Make Text Overflow Ellipsis Work in Table Cells?

Mary-Kate Olsen
Release: 2024-11-05 01:45:02
Original
350 people have browsed it

How to Make Text Overflow Ellipsis Work in Table Cells?

The Elusive Ellipsis: Uncovering the CSS Challenge in Table Cells

Consider a simple scenario: you want to display a long text within a table cell, while restricting its width to 50 pixels. Naturally, you employ CSS properties to achieve this: text-overflow: ellipsis, white-space: nowrap, and a set width. However, to your surprise, the ellipsis is nowhere to be found, leaving you puzzled.

To understand the issue, let's delve into the CSS specification. The text-overflow property affects inline elements, which table cells are not by default. To enable ellipsis, we need to explicitly set display: block or display: inline-block for the table cells. This grants them inline-like behavior, allowing the text-overflow property to take effect.

Alternatively, you can opt for another approach. By setting table-layout: fixed; for the table and specifying its width, you force the width to be distributed evenly across the cells. This effectively also enables ellipsis within the cells.

Here's how the code would look with these solutions:

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>
Copy after login

or

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>
Copy after login

Implementing either of these solutions will resolve the issue, allowing the ellipsis to work as intended within table cells.

The above is the detailed content of How to Make Text Overflow Ellipsis Work in Table Cells?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template