内容超出显示省略号：

<html>

<style>

    table {

        table-layout: fixed;

        width: 100%;

    }

    table, th, td {

        border: 1px solid #999;

        padding: 5px;

        text-align: left;

    }

    td.desc {

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }

</style>

<table>

　　<thead>

　　　　<tr>

　　　　　　<th class="desc">项目名</th>

　　　　　　<th width='20%' class="desc">Url</th>

　　　　　　<th width='40%' class="desc">描述</th>

　　　　　　<th>语言</th>

　　　　　　<th class="number desc">Stars</th>

　　　　</tr>

　　</thead>

　　<tbody>

　　{% for source in sources %}

　　　　<tr>

　　　　　　<td class="desc" title="{{ source.name }}">{{ source.name }}</td>

　　　　　　<td class="desc" title="{{ source.url }}">{{ source.url }}</td>

　　　　　　<td class="desc" title="{{ source.description }}">{{ source.description }}</td>

　　　　　　<td class="desc" title="{{ source.primary_lang }}">{{ source.primary_lang }}</td>

　　　　　　<td>{{ source.stars }}</td>

　　　　</tr>

　　{% endfor %}

　　</tbody>

</table>

</html>

注意：

1、 table 设置：

table-layout:fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */

table的width 也要设置;

2、th, td 的设置：

overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */

      text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

3、这些样式必须在 th, td 都写才有效果，并且th, td 还要定义属性width。

另外，省略的文字如果想展示，

可以给td添加title属性，这样鼠标移动到该元素会自动显示所有的文字。

Html table 内容超出显示省略号的更多相关文章

  1. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  2. css内容超出显示省略号

    CSS实现单行.溢出显示省略号(…) 把要设置的显示省略号的标签,加上以下的属性 overflow: hidden; /*超出不显示*/ text-overflow: ellipsis;/* 超出内容 ...

  3. css实现文字内容超出显示省略号

    white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellip ...

  4. 仅支持webkit浏览器的多行内容超出显示省略号

    .box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...

  5. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  6. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  7. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  8. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  9. 文本超出显示省略号CSS

    单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...

随机推荐

  1. 【STM32H7教程】第33章 STM32H7的定时器应用之TIM1-TIM17的中断实现

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第33章       STM32H7的定时器应用之TIM1-T ...

  2. Java 9 ← 2017，2019 → Java 13，来看看Java两年来的变化

    距离 2019 年结束,只剩下 33 天了.你做好准备迎接 2020 年了吗? 一到年底,人就特别容易陷入回忆和比较之中,比如说这几天的对比挑战就火了! 这个话题登上了微博的热搜榜,也刷爆了朋友圈, ...

  3. vue组件之间的通信方式

    组件之间的通信方式有很多种 这里分享4种组件之间的通信方式 props(主要是父传子)  自定义事件(主要是子传父)  pubsub消息订阅与发布  xuex 1.props和自定义事件 app.vu ...

  4. SpringBoot"热"部署解决方案

    作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 SpringBoot热部署两种方式 1.SpringLoader 插件 ​ 缺点: Java 代码做部署处理.但是对页面无能为力. 2.DevToo ...

  5. hive操作简单总结

    Hive DDL.DML操作 背景介绍 • 一.DDL操作(数据定义语言)包括:Create.Alter.Show.Drop等. • create database- 创建新数据库 • alter d ...

  6. Tesseract.js 一个几乎能识别出图片中所有语言的JS库

    Tesseract.js 一个几乎能识别出图片中所有语言的JS库. 官网:http://tesseract.projectnaptha.com/ git:https://github.com/napt ...

  7. GPS定位的偏移校正(WGS84与火星坐标互转)

    地图坐标系目前包括: 地球坐标 (WGS84) WGS84:World Geodetic System 1984,是为GPS全球定位系统使用而建立的坐标系统. 国际标准,从 GPS 设备中取出的数据的 ...

  8. 微信小程序——表单验证插件WxValidate的二次封装（终极版）

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

  9. MySQL数据库增删改查等常用命令介绍

    MySQL可以说是最常用的小型数据库,加上现在越来越流行的分布式架构,哪怕是一般的中大型项目也可以用MySQL来进行部署. 数据库的操作最常用的就是增删改查,还有一些切换数据库等操作.以下命令不加说明 ...

  10. leetcode题解：两数之和

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...