<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. 漫谈深度学习时代点击率预估技术进展 &&深度学习在推荐系统上的发展

    转载:https://www.infoq.cn/article/XA055tpFrprUy*0UBdCb https://www.zhihu.com/question/20830906/answer/ ...

  2. talkingdata比赛分析

    1.kaggle数据分析经验: https://medium.com/unstructured/how-feature-engineering-can-help-you-do-well-in-a-ka ...

  3. Android Studio 设置项目Module编码,解决Android Studio项目执行时乱码问题

    Android Studio的项目设置逻辑与Eclipse有非常大的差别.运行的操作为File->Setting->File Encodings然后来进行设置,如图所看到的: waterm ...

  4. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office的JavaScript对象模型

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps  Office的JavaScript对象模型         ...

  5. GB28181对接视频流

    今天抽空写下以GB28181的方式获取摄像机视频流以备后用,同时也希望能帮助到正着手开发GB28181对接视频的同学,这块的资料实在不多. 今天讲的内容不涉及到平台对接,平台对接下次有时间再讲,平台对 ...

  6. 找回Xcode7的代码折叠功能

    升级到Xcode7后,会发现代码折叠功能不见了,这是怎么回事? 其实这个功能还在的,用以下的快捷键仍然可以折叠代码.只是不能用鼠标实现折叠了:在Xcode菜单里选择Preference——Text E ...

  7. kubernetes 之QoS服务质量管理

    系列目录 在kubernetes中,每个POD都有个QoS标记,通过这个Qos标记来对POD进行服务质量管理.QoS的英文全称为"Quality of Service",中文名为& ...

  8. 在Fedora25上轻松安装Cuda8

    http://blog.csdn.net/u010158659/article/details/53592891 Cuda 8对于Pacal架构的英伟达新一代显卡(GTX 1070/1080/Tita ...

  9. C#XML的序列化与反序列化

    要序列化的对象的类: [Serializable]public class Person{private string name;public string Name{get{return name; ...

  10. ThinkPHP5 安装自定义模块

    安装官方给的demo,在build.php文件中 <?php // +-------------------------------------------------------------- ...