内容超出显示省略号：

<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. Appium(九)：Appium API(三) 滑动和拖拽、高级手势、手机操作

    1. 滑动和拖拽 我们在做自动化测试的时候,有些按钮是需要滑动几次屏幕后才会出现,此时,我们需要使用代码来模拟手指的滑动,也就是接下来要学的滑动和拖拽了. 1.1 swipe滑动事件 从一个坐标位置滑 ...

  2. java 整合redis缓存 SSM 后台框架 rest接口 shiro druid maven bootstrap html5

    A 调用摄像头拍照,自定义裁剪编辑头像,头像图片色度调节B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0个代码不用写,生成 ...

  3. js-01-基础知识

    一.JS变量的声明.数据类型和变量的转换 1.js变量声明关键字:var 注意:a:js变量区分大小写: b:js中字符串可使用双引号,也可使用单引号: c:js中可声明同名变量,控制台不会报错,但后 ...

  4. 超实用的JS数组去重

    一.简单的去重方法,利用数组indexOf方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  5. C lang: The Command line

    Ax_command line h Ax_a command line describe The command line is in enviroment for DOS,to user opera ...

  6. IntelliJ IDEA 2019.2.2同个项目运行多次的方法

    IntelliJ IDEA默认运行项目后,再点击运行就是重启,但有时候,需要配置项目的不同端口号,同时运行. 步骤如下: 1.点击IDEA右上角项目的隐藏下拉框,出现下拉列表,点击Edit Confi ...

  7. 44-创建 Machine

    对于 Docker Machine 来说,术语 Machine 就是运行 docker daemon 的主机.“创建 Machine” 指的就是在 host 上安装和部署 docker.先执行 doc ...

  8. MySQL相关参数总结

    保留个原文链接,避免被爬虫爬了过去,以便后续更正补充:https://www.cnblogs.com/wy123/p/11273023.html MySQL参数繁多,是一个需要根据具体业务.软硬件环境 ...

  9. 数据库三，exec内置函数

    数据库三,exec内置函数 一.数据库查询与执行顺序 必备知识 查询语句的基本操作 - select - from - where - group by - having - distinct - o ...

  10. MSSQL一个关于Count函数的小实例

    --创建测试表 if object_id(N'T_Test',N'U') is null CREATE TABLE [dbo].[T_Test] ( , ) PRIMARY key NOT NULL, ...