<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. python 使用cx-freeze打包程序

    python环境 3.6.5      win7   linux环境同理 先尝试了PyInstaller   ,打包时一直提示 no module named gtk   而gtk 又依赖pygobj ...

  2. 整合Hibernate3.x

    As of Spring 3.0, Spring requires Hibernate 3.2 or later. Hibernate 3和Hibernate 4有一些区别,所以对于spring而已, ...

  3. RSA、AES加密解密

    RSA #!/usr/bin/env python # -*- coding:utf-8 -*- import rsa import base64 # ######### 1. 生成公钥私钥 #### ...

  4. 在没有安装access的电脑上读写.mdb文件

    在微软官方下载MDAC access数据库访问组件即可

  5. python正则中的贪婪与非贪婪

    当重复一个正则表达式时,如用 a*,操作结果是尽可能多地匹配模式.当你试着匹配一对对称的定界符,如 HTML 标志中的尖括号.匹配单个 HTML 标志的模式不能正常工作,因为 .* 的本质是“贪婪”的 ...

  6. cocos2dx3.0 对象池

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdzE4NzY3MTA0MTgz/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. Spring Boot实现STOMP协议的WebSocket

    关注公众号:锅外的大佬 每日推送国外优秀的技术翻译文章,励志帮助国内的开发者更好地成长! WebSocket协议是应用程序处理实时消息的方法之一.最常见的替代方案是长轮询(long polling)和 ...

  8. Java Web Start

    1. JNLP 2. Security issue: https://java.com/en/download/help/win_controlpanel.xml Windows 7, Vista C ...

  9. PHP对称加密类

    <?php /** * Created by PhpStorm. * User: zongbinghuang * Date: 2017/7/31 * Time: 15:13 */ namespa ...

  10. kubernetes-notes--阅读笔记

    文档地址 https://www.huweihuang.com/kubernetes-notes/