search
HomeWeb Front-endCSS TutorialHow to add ellipses function in table

This time I will show you how to add the ellipsis function in the table table. What are the precautions for adding the ellipsis function in the table table? The following is a practical case, let's take a look.

1. Cause

After receiving a request, it was said that if there are too many words in the table, ellipses should be used. It is natural to think of text-overflow:ellipsis (, note: overflow: hidden; text- overflow:ellipsis; white-space:nowrap must be used together), but it does not work in the table. Baidu immediately said that in order to work, you need to set table-layout: fixed to the table element, and it worked.

2. The prerequisite for text-overflow:ellipsis to work

Be sure to define the width of the container (key point)

If overflow: hidden; is missing; the text will be stretched horizontally Easy outside

If the white-space:nowrap; text is missing, the height of the container will be pushed down; even if you define the height, the ellipsis will not appear and the excess text will be cut off

If text-overflow:ellipsis; is missing, the excess text will be cut off, which is equivalent to defining text-overflow:clip like this

3. The premise of the above key points

Be sure to define the width of the container. This is why table-layout: fixed works, but table-layout: auto (table element defaults to auto) does not work. The following paragraph comes from the CSS2.1 Chinese version specification:

'table-layout'
Value: auto | fixed | inherit
Initial: auto
Applies to: 'table' and 'inline-table' elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: Same as the specified value

The 'table-layout' property controls the algorithm used for table cell, row, and column layout. The meaning of the value is as follows:
fixed: Use fixed table layout algorithm
auto: Use any automatic table layout algorithm

(The difference between fixed and auto is that one is fixed and the other is automatic)

Following These two algorithms are described:

In the fixed table layout algorithm (fixed), the width of each column is determined by the following rules:

A column whose width attribute value is not 'auto' The width of the column where the element is located is set to the width value

Otherwise, the width of the column is determined by the cells in the first row whose width attribute value is not 'auto'. If the cell spans multiple columns, the width is divided over the columns

All remaining columns are divided equally between the remaining horizontal table space (minus borders or cell spacing) As mentioned in

3, all remaining columns equally divide the remaining horizontal table space. The actual situation is that the table divides the width of the remaining columns equally, and the fixed width of each column is the remaining width/number of remaining columns, text-overflow The prerequisite for :ellipsis to work is that the width of the container must be defined, so fixed works.

In the automatic table layout algorithm (fixed), the column width is determined by the following steps:

Calculate each Minimum content width (MCW) of cells: Formatted content can span any number of lines, but cannot overflow from the cell. If the cell's specified 'width' (W) is greater than MCW, W is the minimum cell width. The 'auto' value means that the MCW is the minimum cell width. Then, the "maximum" width of each cell is calculated: format the content, not considering line breaks other than explicit line breaks

For each column, start from only Determines a maximum and minimum column width among the cells spanning the column. The minimum column width is the minimum required column width whichever is the largest of the minimum cell widths (or column 'width', whichever is greater). The maximum column width is the maximum column width required for the largest of the maximum cell widths (or column 'width', whichever is greater)

For each cell that spans multiple columns, increase the The minimum width of the columns, making them at least as wide as the cells. The same goes for the maximum width. If possible, widen all spanning columns to approximately the same width

For each column group element whose 'width' is not 'auto', increase the minimum width of the columns it spans so that they are at least as wide as The 'width' of the column group is the same width

In fact, some things are very simple, but talking about it is confusing. . . As mentioned in
1, if the 'width' (W) specified by the cell is greater than MCW, W is the minimum cell width. The 'auto' value indicates that MCW is the minimum cell width.

**Case 1: When W > MCW, W is the minimum cell width, indicating that column width = W, column width can fit text, and no ellipses are needed.
Case 2: When W **
If you want to use ellipsis without using table-layout:fixed, that is, under the premise of table-layout:auto, you can do as follows (set another element in td, and add this element to Setting ellipsis)

<style>div {  width: 100px;
}.ellipsis {  text-overflow:ellipsis;  overflow: hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}</style>...<td>
  <div class="ellipsis">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </div></td>...

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use the pseudo element first-letter to capitalize the first letter of text

Detailed explanation of the Counters attribute of css

Detailed explanation of function overloading in JavaScript

How front-end and back-end data should interact scientifically

The above is the detailed content of How to add ellipses function in table. For more information, please follow other related articles on the PHP Chinese website!

Statement
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
Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridWeekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AM

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsWeekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AM

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

The Power (and Fun) of Scope with CSS Custom PropertiesThe Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AM

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

We Are ProgrammersWe Are ProgrammersApr 14, 2025 am 11:04 AM

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

How Do You Remove Unused CSS From a Site?How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIAn Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyWays to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthOh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),