<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. epoll 浅析以及 nio 中的 Selector

    首先介绍下epoll的基本原理,网上有很多版本,这里选择一个个人觉得相对清晰的讲解(详情见reference): 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作 ...

  2. mac异常删除管理员账户恢复操作

    重新启动电脑,同时按下command+s键进入命令行方式 待系统加载完成后顺序输入以下命令: /sbin/mount -uaw rm var/db/.applesetupdone reboot 待系统 ...

  3. C#使用CurrentUICulture切换语言

    1. 创建2个窗口   2. 窗口1属性Localizable设置为True,Language选择英语(美国) 然后把窗口1中控件的Text由中文编辑成英文,Form2一样设置.   此时,Form1 ...

  4. 仰视源代码,实现strcpy

    编程实现字符串的拷贝,不能用库函数. 一般的刚開始学习的人也许能写出来.可是要写的非常完美那就须要基本功了. char* strcpy(char* strDest, const char* strSr ...

  5. SMI#、SCI#信号在OS、BIOS、EC中的中断方式(Linux)

    EC资料有个很好的CSDN博客推荐去看看:zhao_longwei的专栏 EC固件代码架构:https://blog.csdn.net/zhao_longwei/article/details/510 ...

  6. poj3181 Dollar Dayz

    Description Farmer John goes to Dollar Days at The Cow Store and discovers an unlimited number of to ...

  7. caffeModels--models-caffes-大全

    caffe的伯克利主页:http://caffe.berkeleyvision.org/caffe的github主页:https://github.com/BVLC/caffe caffe的model ...

  8. dubbo 实战1

    准备:先安装zookeeper,然后进入一下步骤 服务端 1.新建 maven项目 2.pom.xml 内容如下 <?xml version="1.0" encoding=& ...

  9. Thread join方法的用途

    主线程中会创建多个子线程做一些事情,主线程要用到这些子线程处理的数据,因此它需要等待所有的子线程处理完之后才继续运行.这就要用到join方法了.

  10. PAT 天梯赛 L1-049. 天梯赛座位分配 【循环】

    题目链接 https://www.patest.cn/contests/gplt/L1-049 思路 用一个二维数组来保存一个学校每个队员的座位号 然后需要判断一下 目前的座位号 与该学校当前状态下最 ...