<style>
.table{
table-layout: fixed;
width:100%;
}
.td{
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
        word-wrap: normal;
} table td { border:1px solid red; } </style>

第二种方式是用js直接截取字符串,在拼接三个点...;这样页面样式看上去也像是超出变成...

截取字符串的方法有很多钟,这里只举例一种:str=str.substring(0,i);  // 取字符串的前i个字符;

想要了解更多截取字符串方法,推荐一篇文章 https://www.cnblogs.com/cuixiaohua/p/7373171.html

备注: .table是整个表格的样式, .td是需要改变td长度溢出变省略号的样式。

css td 溢出改为省略号的更多相关文章

  1. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  2. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  3. css text-overflow溢出文本显示省略号

    <div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...

  4. ant Table td 溢出隐藏(省略号)

    1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...

  5. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  6. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  7. css 文字溢出隐藏 带省略号

    .demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置

  8. (轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

    轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...

  9. CSS文本溢出,显示省略号(...)

    方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...

随机推荐

  1. Android GC 原理探究

    导语 想写一篇关于 android GC 的想法来源于追查一个魅族手机图片滑动卡顿问题,由于不断的 GC 导致的丢帧卡顿的问题让我们想了很多方案去解决,所以就打算详细的看看内存分配和 GC 的原理,为 ...

  2. Objective C block背后的黑魔法

    前言 block在Objective C开发中应用非常广泛,我们知道block会捕获外部对象,也知道使用block要防止循环引用. "知其然而不知其所以然"是一件非常痛苦的事情,那 ...

  3. Django-select_related优化查询

    对于一对一字段(OneToOneField)和外键字段(ForeignKey),可以使用select_related 来对QuerySet进行优化. select_related 返回一个QueryS ...

  4. tomcat 代码集

    Tomcat类是整个tomcat的起点,负责加载所有的配置信息以及把配置信息解析转换成tomcat组件对象. Context addWebapp(String contextPath, String ...

  5. iOS开发教程:Storyboard全解析-第一部分

    本文转载至http://blog.csdn.net/chang6520/article/details/7945845 感谢原文作者分享     故事版(Storyboard)是一个能够节省你很多设计 ...

  6. WWDC2014 IOS8 APP Extensions

    本文转载至 http://blog.csdn.net/jinkaiouyang/article/details/35558623  感谢撰文作者的分享     WWDC14 最令人兴奋的除了新语言sw ...

  7. MongoDB复制集架构搭建

    创建目录 mkdir -p /data/r0 /data/r1 /data/r2 声明实例 ./bin/mongod --port 27017 --dbpath /home/workspace/dat ...

  8. Netty 100万级高并发服务器配置

    前言 每一种该语言在某些极限情况下的表现一般都不太一样,那么我常用的Java语言,在达到100万个并发连接情况下,会怎么样呢,有些好奇,更有些期盼. 这次使用经常使用的顺手的netty NIO框架(n ...

  9. java代码中的三元表达式

    1.格式 布尔型表达式?a:b,例子:boolean c;int a=1,b=2;c=a>b?10:15,这样子最终返回的结果是15

  10. android实现跑马灯效果

    第一步:新建一个新项目,MarqueeTextView 首先为了观察到跑马灯效果,将要显示的文字极可能 写长.在strings.xml目录里面将 <string name="hello ...