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
常用的numpy方法和注意事项来增加维度常用的numpy方法和注意事项来增加维度Jan 26, 2024 am 08:38 AM

numpy是Python中常用的科学计算库,提供了丰富的数学函数和强大的数组操作功能。在实际应用中,有时我们需要对数组进行维度的扩展或调整。本文将介绍numpy中常用的增加维度的方法,并提供详细的代码示例。一、使用reshape方法numpy中的reshape方法允许我们将数组的维度进行修改,而不改变数组的元素个数。具体使用方法如下:importnumpy

vue3 table组件怎么使用vue3 table组件怎么使用May 12, 2023 pm 09:40 PM

基础表格首先开发table组件之前,先想好要用什么样式的api,因为笔者在生产工作中用的都是element,所以前面几个组件风格和element类似,但是这次不打算用element的风格了,打算换一种,直接展示:我们期望用户这样使用:constdataList=[{id:1,name:&#39;《JavaEE企业应用实战》&#39;,author:&#39;dev1ce&#39;,price:&#39;10.22&#39;,desc:&#3

如何使用MongoDB实现数据的增加、修改、删除功能如何使用MongoDB实现数据的增加、修改、删除功能Sep 20, 2023 pm 02:53 PM

如何使用MongoDB实现数据的增加、修改、删除功能MongoDB是一种流行的开源NoSQL数据库,具有高性能、可伸缩性和灵活性。在使用MongoDB存储数据时,我们经常需要对数据进行增加、修改和删除操作。以下是使用MongoDB实现这些功能的具体代码示例:数据库连接:首先,我们需要连接到MongoDB数据库。在Python中,可以使用pymongo库来实现

麦肯锡:2022年人工智能应用率翻倍麦肯锡:2022年人工智能应用率翻倍Oct 10, 2023 pm 02:21 PM

可以自动跟随顾客的购物车和比人类采摘黄瓜速度更快的机器人,更容易成为抓人眼球的头条新闻,但人工智能和机器学习技术最引人注目的应用通常是在看不见的幕后。越来越多的组织开始将人工智能和机器学习驱动的工具应用于后台流程,例如文档处理、数据输入、员工入职和工作流自动化,它们发现了显著的效率提升。几十年来,通过自动化提高后台生产力的能力已经很明显,但随着先进的人工智能和机器学习工具的出现,使自动化可以实现的目标发生了一步变化,包括在医疗保健等高度监管的行业。(来源:AI生成)“过去,人工智能被认为是一项复

PPT文档时增加撤消步数的操作方法PPT文档时增加撤消步数的操作方法Mar 26, 2024 pm 02:30 PM

1、运行PPT软件。2、点击左上角的【文件】选项卡。3、在文件选项卡点击左侧的【选项】。4、点击PowerPoint选项窗口左侧的【高级】。5、在高级选项卡中,输入你需要的撤消步数。6、设置完成后点击【确定】。现在PowerPoint软件就会为你记录你设置的步数了。注意不同版本的Office进入选项设置的方式略有不同。

如何在dedecms中增加新栏目?如何在dedecms中增加新栏目?Mar 14, 2024 pm 01:51 PM

如何在dedecms中增加新栏目?随着互联网的快速发展,网站内容管理系统变得越来越重要。而dedecms作为一款功能强大且灵活的内容管理系统,受到了许多网站开发者的青睐。在使用dedecms建站的过程中,有时候我们需要根据实际需求增加一些新的栏目,以便更好地组织和管理网站内容。那么,如何在dedecms中增加新栏目呢?接下来将为您介绍具体的操作步骤和代码示例

jquery如何对table增加一行jquery如何对table增加一行May 29, 2023 pm 01:24 PM

jquery对table增加一行的方法:1、创建一个html示例文件,并引用jQuery文件;2、使用“table”,“tr”,“td”标签创建表格;3、创建button按钮,绑定onclick点击事件,然后执行“addhang()”函数;4、在函数内定义一个变量tr,用于保存需要添加的表格行,$符号获取table对象,通过“append()”方法实现对table增加一行即可。

快速学习如何利用jQuery在表格中增加一行快速学习如何利用jQuery在表格中增加一行Feb 28, 2024 pm 10:09 PM

jQuery是一种流行的JavaScript库,被广泛用于简化网页开发。在网页中使用jQuery可以使代码更加简洁、易于维护,并且能够实现许多复杂的功能。本文将教你如何利用jQuery在表格中快速增加一行,让你轻松处理表格数据的添加操作。首先,我们假设你已经了解了jQuery的基本语法和在网页中如何引入jQuery库。如果你还不熟悉jQuery,请先学习一些

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)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

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

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools