内容超出显示省略号：

<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. 原生js的2048的制作过程

    1.首先我们来看一下效果图 开始: 结束: 接下来我们来实现代码部分: HTML部分: 2048大家应该都玩过,首先我们要准备16个盒子让它4*4排列,这里的css我就不说了,这应该使我们都会的,在这 ...

  2. SpringAOP中切入点的高级使用

    上一篇 SpringAOP之使用切入点创建通知 SpringAOP中切点的高级使用 一.使用控制流切入点(ControlFlowPointcut) 什么是控制流切入点呢?看下面的代码(为了方便,就写进 ...

  3. Dev 日志 | 如何将 jar 包发布到 Maven 中央仓库

    摘要 Maven 中央仓库并不支持直接上传 jar 包,因此需要将 jar 包发布到一些指定的第三方 Maven 仓库,比如:Sonatype OSSRH 仓库,然后该仓库再将 jar 包同步到 Ma ...

  4. 一起学SpringMVC之国际化

    随着网络的发展,在Web开发中,系统的国际化需求已经变得非常的普遍.本文主要讲解SpringMVC框架对多语言的支持,仅供学习分享使用,如有不足之处,还请指正. 什么是国际化? 国际化(interna ...

  5. ABAP分享四 选择屏幕下拉菜单简单实现示例

    PARAMETERS p_carri2 LIKE spfli-carrid                    AS LISTBOX VISIBLE LENGTH 20                ...

  6. 使用vsphere client 克隆虚拟机的具体操作步骤

    采用 VMWare ESXi6.0,使用ESXi经常会遇到这样的问题,需要建立多个虚拟机,都是一样的操作系统,但是如果一台台装效率太低. VMware ESXi.VMware vCenter Serv ...

  7. celery执行异步任务和定时任务

    一.什么是Clelery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 Celery的架构由三部分组成,消息中间件 ...

  8. [Go]TCP服务中增加消息队列与工作池

    之前的处理中每一个连接都会创建一个主groutine , 每个连接中的主groutine中创建出读groutine 和写groutine 每个连接处理业务再单独开出一个groutine ,这样如果有1 ...

  9. liunxCPU和内存，磁盘等资源

    1.Screen是一款由GNU计划开发的用于命令行终端切换的自由软件.用户可以通过该软件同时连接多个本地或远程的命令行会话,并在其间自由切换.GNU Screen可以看作是窗口管理器的命令行界面版本. ...

  10. JS原型链与instanceof底层原理

    一.问题: instanceof 可以判断一个引用是否属于某构造函数: 另外,还可以在继承关系中用来判断一个实例是否属于它的父类型. 老师说:instanceof的判断逻辑是: 从当前引用的proto ...