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!

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

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

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

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

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

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

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
The most popular open source editor

SublimeText3 Linux new version
SublimeText3 Linux latest version

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 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),