td 中设置超出宽度显示省略号失效
td测试内容超出显示省略号时,结果没有显示省略号,而是一直往后显示,且超出了td大小,强行挤大了table.
原因是因为td默认不换行。
解决方法:
1.强制td换行. IE加上word-break:break-all;
2.是给td加上display: inline-block;
3.在下面加一个其他标签如a,加上display: inline-block; 以及宽度。
html如下:
<tr><td>1</td><td><a href="#">你的16年计划完成几个了?</a></td></tr>
css如下:
td:first-child{width: 20px;}
td:last-child{width: 230px;}
td a{overflow:hidden; white-space:nowrap; text-overflow: ellipsis; word-break:break-all; display: inline-block; width: 220px;}
td 中设置超出宽度显示省略号失效的更多相关文章
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器
1,公共样式,在公共的 CSS 文件中加入以下内容 /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
随机推荐
- 【2018.10.4】CXM笔记(图论)
.1.给你一个无向图,问这张图的最小割是否唯一.输出yes或no. 跑一边最大流,那么最小割的那些正向边一定满流(也就是过不了了).所以在残余网络上,从S到T和从T到S各广搜找一组最小割的边(即正向边 ...
- Generation I
Generation I Oak is given N empty and non-repeatable sets which are numbered from 1 to N. Now Oak is ...
- ⑨要写信(codevs 1697)
题目描述 Description 琪露诺(冰之妖精)有操控冷气的能力.能瞬间冻结小东西,比普通的妖精更危险.一直在释放冷气的她周围总是非常寒冷. 由于以下三点原因…… 琪露诺的符卡 冰符“Icicle ...
- 洛谷 [P1939] 矩阵加速数列
矩阵快速幂模版 #include <iostream> #include <cstring> #include <cstdlib> #include <alg ...
- HDU 4770 Lights Against Dudely 暴力枚举+dfs
又一发吐血ac,,,再次明白了用函数(代码重用)和思路清晰的重要性. 11779687 2014-10-02 20:57:53 Accepted 4770 0MS 496K 2976 B G++ cz ...
- spring-boot-nginx代理-docker-compose部署
在本地测试,使用docker部署不用在意环境 java测试项目: web框架:spring boot 框架 项目管理:maven 数据库:redis + postgres + mongo 部署相关:n ...
- 关于 最短路条数 和 边不可重复最短路条数问题 /hdu3599(边不可重复最短路)
原先一直在做一道省赛题,由于题意错误理解成球最短路条数,误打误撞敲了最短路条数,又发现hdu3599(多校)求边不可重复最短路条数.下面说说俩种问题解法: 最短路条数: 求一个图一共一几条最短路径,思 ...
- JS实现限行
一.JS代码实现 1. 机动车辆限行如下图所示: 具体详情请访问:http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html 2.JS代码实现 <! ...
- ZOJ 1112 Dynamic Rankings【动态区间第K大,整体二分】
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1112 题意: 求动态区间第K大. 分析: 把修改操作看成删除与增加 ...
- 1.关于无rospy.spin()调用多次callback 2. subscrib后面语句和callback函数运行顺序
#!/usr/bin/env python import rospy from bzrobot_msgs.msg import bzr_WheelLinearVels #from threading ...