内容超出显示省略号：

<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. 【转载】ssh-copy-id三步实现SSH无密码登录和ssh常用命令

      ssh-keygen  产生公钥与私钥对 ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./s ...

  2. 如何利用随机数产生验证码（java基础知识）

    以前我们通用的验证码都是五个不同的大小写字母,那么今天我就带大家学习一下利用Java基础怎么生成验证码.首先我们应该有一个清晰的思路:首先定义一个固定长度的数组用来存储需要生成的字母:其次生成随机数, ...

  3. 使用docker部署filebeat和logstash

    想用filebeat读取项目的日志,然后发送logstash.logstash官网有相关的教程,但是docker部署的教程都太简洁了.自己折腾了半天,踩了不少坑,总算是将logstash和filebe ...

  4. 48-创建 overlay 网络

    上一节我们搭建好实验环境,配置并运行了consul,今天开始创建 overlay 网络. 在 host1 中创建 overlay 网络 ov_net1: -d overlay 指定 driver 为 ...

  5. pycharm中全局搜索ctrl+shift+F快捷键无反应原因和解决

    全局搜索快捷键无反应原因:搜狗输入法占用的ctrl+shift+F快捷键,简繁切换的快捷键.在搜狗输入法中将此项取消.

  6. koa2跨域模块koa2-cors

    之前写了一个api在小程序里调用,但是我不想每次都打开小程序,所以想写一个简单的网页,但是遇到CORB的问题: 经尝试,jsonp等都没起作用,由于我后台是koa写的,发现koa2-cors库可以解决 ...

  7. Fiddler之模拟响应、修改请求或响应数据（断点）

    在测试过程中,有时候需要修改请求或响应数据,或者直接模拟服务器响应,此时可以使用fiddler进行此类操作.可以使用断点功能完成. 一.修改请求数据 在发起请求后,需要修改请求的数据时,可以设置请求前 ...

  8. 从荣耀 xSport Pro 运动蓝牙耳机发布看蓝牙立体声耳机的新动态

    10月22日,荣耀在北京举行新品发布会,不仅带来了荣耀20青春版手机,还正式发布了荣耀xSport PRO运动蓝牙耳机.该款耳机是荣耀全新一代颈戴式运动蓝牙耳机,兼具运动和时尚属性,高颜值的渐变色机身 ...

  9. Git教程---由浅入深

    初学者很难找到一个由浅入深,学完后能立刻上手的Git教程 Git用户 V&Git专家 Git是一个工具,是目前世界上最先进的分布式版本控制系统(没有之一). 集中式的版本控制系统  V& ...

  10. 01-linux介绍

    一.Linux简介 Linux内核最初只是由芬兰人林纳斯.托瓦兹在大学时出于爱好写出来的,是一套免费使用和自由传播的类Unix操作系统,是基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU ...