内容超出显示省略号：

<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. VS2019 开发Django（三）------连接MySQL

    导航:VS2019开发Django系列 下班回到家,洗漱完毕,夜已深.关于Django这个系列的博文,我心中的想法就是承接之前的微信小程序的内容,做一个服务端的管理中心,上新菜单,调整价格啊!之类的, ...

  2. ReactNative: 使用对话框组件AlertIOS组件

    一.简介 在使用一款App的时候,经常会用到对话框进行信息的友好提示,一般简单要求性不高的时候我们可以使用web提供的alert实现即可.但是,对于需要交互性和美观性的对话框,alert就明显无法满足 ...

  3. golang的make

    golang 分配内存主要有内置函数new和make,今天我们来探究一下make有哪些玩法. map只能为slice, map, channel分配内存,并返回一个初始化的值.首先来看下make有以下 ...

  4. Promise代码详解（show you the code）

    认识异步函数 同步函数: const sum1 =(a,b)=>{ return a+b } console.log('AAA'); console.log(sum(5,6)); conosle ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 3D变换3

    5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...

  6. Centos系统镜像安装

    一.下载Centos版本 官网地址:http://isoredirect.centos.org/centos 二.制作U盘启动镜像 1.下载安装win32diskimager,用于制作U盘启动镜像,点 ...

  7. django nginx 504 time-out 错误

    报错: 分析 nginx和uwsgi整合时有三个参数可以用于设置超时时间: 1.uwsgi_connect_timeout: 默认60秒,与uwsgi-server连接的超时时间,该值不能超过75秒. ...

  8. 基于Git的数据库sql文件的管理——完美解决团队sql操作协同问题

    目录 基于Git的数据库sql文件的管理--完美解决团队sql操作协同问题 1.产生背景 2.之前没用Git管理数据库出现的问题 2.1 用同一个库调试带来的问题 3.解决方案 3.1 Sql文件的创 ...

  9. GitLab-使用SSH的方式拉取和推送项目

    场景 Docker Compose部署GitLab服务,搭建自己的代码托管平台(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...

  10. Dynamics 365需要的最小的权限用来更改用户的业务部门和角色

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...