4行CSS实现表格内容超过一行的部分,用省略号代替(转载)

Html代码   收藏代码
  1. table{  
  2.   
  3.   table-layout: fixed;  
  4.   
  5. }  
  6.   
  7. td{  
  8.   
  9.   white-space: nowrap;  
  10.   overflow: hidden;  
  11.   text-overflow: ellipsis;  
  12.   
  13. }  

 

原理:

本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:

1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)

2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。

3. overflow: hidden 隐藏超出单元格的部分。

4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

 


效果图:

源代码:

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.   
  5.     <style type="text/css">  
  6.         table  
  7.         {  
  8.             table-layout: fixed;  
  9.             width: 100%;  
  10.         }  
  11.           
  12.         td  
  13.         {  
  14.             white-space: nowrap;  
  15.             overflow: hidden;  
  16.             text-overflow: ellipsis;  
  17.             background-color: #ccc;  
  18.         }  
  19.     </style>  
  20.   
  21. </head>  
  22. <body>  
  23.     <table>  
  24.         <thead>  
  25.             <th>  
  26.                 第一列  
  27.             </th>  
  28.             <th>  
  29.                 第二列  
  30.             </th>  
  31.         </thead>  
  32.         <tbody>  
  33.             <tr>  
  34.                 <td>  
  35.                     <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>  
  36.                 </td>  
  37.                 <td>  
  38.                     超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容  
  39.                 </td>  
  40.             </tr>  
  41.         </tbody>  
  42.     </table>  
  43. </body>  
  44. </html>  

 

        兼容性:http://www.php100.com/manual/css3_0/text-overflow.shtml

华大HC32F460 TCP Client 实验 阅读详情

相关推荐

apm软件仿真+QGC地面站 环境搭建

本教程使用场景:apm软件仿真运行于虚拟机 ubuntu环境。qgc地面站位于windows 系统。两个环境在同一台电脑上。 一.apm仿真环境搭建 1.安装vm虚拟机及ubuntu 18。 2.ubuntu下 下载Ardupilot 飞控源码 并配置环境。 下载源码: git clone https://github.com/ArduPilot/ardupilot cd ardupilot git submodule update --init --recursive 配置所需运行的环境:

qthello 6111

【前端】4行CSS实现表格内容超过的部分用省略号代替

table{   table-layout: fixed; } td{   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; } 原理: 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于...

姜太小白的博客 1351

从亚稳态到流片失败:SpyGlass CDC在5G芯片设计中的避坑指南

本文深入探讨了在复杂5G芯片设计中,如何利用SpyGlass CDC工具构建高效的时钟域交叉验证流程,以避免因亚稳态问题导致的流片失败。文章结合实战经验,详细解析了从约束编写、时钟复位完整性检查到层次化验证和特殊场景处理的全过程,并强调了精准的检查约束是确保验证有效性的基石,旨在帮助设计团队安全跨越异步时钟域的雷区。

weixin_29168153的博客 446

CSS实现显示几行文字,超出部分用省略号显示

一、div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示四行,超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4;(行数) -webkit-box-orient: vertical; ...

weixin_43824675的博客 1315

2024 年高教社杯全国大学生数学建模竞赛题目【A/B/C/D/E题】完整论文+代码+结果

2024国赛A题参考论文。2024国赛D题参考论文。2024国赛E题参考论文。2024国赛B题参考论文。2024国赛C题参考论文。

qq_52590045的博客 5360

[毕设项目-MCP+ENSP]一句话搞定ENSP自动化:MCP + LLM实战(架构图、工具清单、踩坑全解)

用 MCP + LLM 把“人话”变成对华为 ENSP 的安全自动化操作,三款工具覆盖配置/查询/落盘,配套架构、实战与排坑清单。

逐梦苍穹的博客 2547

4行CSS实现表格内容超过一行的部分,用省略号代替

Html代码  table{        table-layout: fixed;      }      td{        white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;      }     原理: 本方法用于解决表格单元格内容过多时

phantomes的专栏 1136

PyTorch深度学习实战(25)——从零开始实现Mask R-CNN实例分割

Mask R-CNN 是一种在目标检测任务中引入了语义分割的强大框架,通过在 Faster R-CNN 基础上进行扩展,添加了额外的分支网络,不仅可以准确地检测对象的位置和类别,还可以生成每个实例的精确像素级别的语义分割掩码。其模块化的设计可以轻松地应用于不同的任务和数据集,并且可以通过添加更多的分支进行功能扩展,如实例关键点检测等。

盼小辉丶的博客 1万+

【备忘】css文本超出后显示省略号(支持单行、多行)

//css文本超出后显示省略号(单行): overflow:hidden; /*是让文本溢出后,显示成省略号*/ text-overflow:ellipsis; /*禁止自动换行*/ white-space:nowrap; //css文本超出后显示省略号(多行): display: -webkit-box; -webkit-box-orient: vertical; /** 要控制的行数, 例如:控制文字达到第4行,那多余的就显示省略号 */ -webkit-lin

qq_15941409的博客 251

抖音 webmssdk 签名算法解析:X-Dynosaur / X-Gnarly / X-Bogus 生成原理

它只依赖设备指纹/环境编码与随机数,与 query 内容无关,因此可以独立于 Dynosaur/Gnarly 生成。

猫敷雪 208

Office系列完全干净卸载工具合集(最全)

使用 Microsoft Fix it 卸载 Microsoft Office 套件 一、Windows 7、Windows Vista或Windows XP下卸载Office 1.MicrosoftEasyFix50416 工具用来卸载office 2003 MicrosoftEasyFix50416_Office2003.msi 2.MicrosoftEasyFix50154 工具用来卸载office 2007 MicrosoftEasyFix50154_Office2007.msi 3.Microso

业精于勤,荒于嬉 3万+

前端CSS:CSS单行、多行文本溢出省略号方法

自定义省略号:使用伪元素或者背景图像来创建自定义的省略号样式。示例代码。

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 2244

ISO2626 --- Item Definition相关项定义

本文并不是针对ISO26262的一个项目,而是针对ISO26262的规范,我们在相关项定义阶段,我们需要做什么,我们的文档需要包含哪些内容的一个描述。

wj博客 909

4行CSS实现【表格内容超过一行的部分,用省略号代替】【支持IE6】

4行CSS实现【表格内容超过一行的部分,用省略号代替】【支持IE6】“` table{  table-layout: fixed;}td{  white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis;} 转载:http://www.cnblogs.com/warrentech/archive/2012/05/09/2

Akony的博客 341

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)

我们在做前端时,经常会要求文字只在一行显示。当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?通过CSS中的word-break,white-space可以达到不换行的效果。用CSS让文字在一行内显示不换行的方法一般的文字截断(适用于内联与块):.text-overflow{display:block;/*内联对象需...

weixin_29605607的博客 8284

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

CSS控制表格的单元格 超出部分显示省略号

只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ } td{ width:100%; word-break:keep-...

KateCateCake的博客 994

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

CSS让表格里的内容强制显示一行,超出长度显示省略号

在写html页面的时候,会经常用到表格,而且很多时候一个tr里边需要包含好几个td,这样就会导致tr的高度不一致,被撑开了这时候,如果能让td里的内容强制显示在一行,并让超出边界范围的内容显示点点,然后再给td加个title属性,显示当前td的内容,这难道不是最理想的结果吗? 其实很简单,4行代码搞定它:table{table-layout: fixed;} td{text-over...

a5842811的博客 278

4行CSS实现【表格内容超过一行的部分,用省略号代替】【支持IE6】 (转)

table{   table-layout: fixed; } td{   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; } 原理: 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1. table-layout: fixed由于table-...

weixin_30898109的博客 150

用CSS让字体在一行内显示不换行

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块): .text-overflow{ display:block; /*内联对象需加*/ width:31em; word-break:keep-all;...

dichen3165的博客 220

HTML Table表格单元格内内容超过宽度自动隐藏

Table表格单元格内内容超过宽度自动隐藏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh...

811

[Web 前端] td长度固定,内容过长,超过部分用省略号代替

cp from :https://blog.youkuaiyun.com/bsh_csn/article/details/51829103 html的table表格中td长度固定,当内容过长时,超过部分用省略号代替. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org...

weixin_33775582的博客 187

CSS控制长文本内容显示(截取的地方用省略号代替)

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法。 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:代码一:用于非表格LI或sp...

weixin_30432007的博客 131

Css解决表格超出部分用省略号显示

小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题。 主要设置两个样式: 1 table{ 2   table-layout: fixed; ==>固定布局的算法。在这种算法中,表格和列的宽度取决于col对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。 ...

weixin_30325071的博客 242

html + CSS实现文字超出长度隐藏,显示省略号

表格: table{   table-layout: fixed; } } t td{      white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; } } 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1. table-layout: fixed 由于tab

love android 3475

设置文字显示字数,超出部分用省略号表示

公司的网站中有时候由于某些文件的文件名太长,在固定了宽度的表格或层中,这些文字不能在一行中完整显示出来,通常都是自动回行到下一行显示,这样的情况对网站本身并没有错,可是却非常有碍于网站的美观,于是,我采取了超过固定宽度用“…”省略号表示和鼠标经过显示完整内容的方式来处理,使得这些内容在网页上...

chuanjiaoye5017的博客 628
上一篇: eclipse 内存设置
下一篇: java thread 执行顺序(转)
tempdowncomputer
博客等级 码龄16年 2粉丝 405原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值