css td 溢出改为省略号

<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 溢出改为省略号的更多相关文章
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- css text-overflow溢出文本显示省略号
<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...
- ant Table td 溢出隐藏(省略号)
1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- #CSS 文本溢出部分显示省略号
单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...
- css 文字溢出隐藏 带省略号
.demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置
- (轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...
- CSS文本溢出,显示省略号(...)
方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...
随机推荐
- NN优化方法对照:梯度下降、随机梯度下降和批量梯度下降
1.前言 这几种方法呢都是在求最优解中常常出现的方法,主要是应用迭代的思想来逼近.在梯度下降算法中.都是环绕下面这个式子展开: 当中在上面的式子中hθ(x)代表.输入为x的时候的其当时θ參数下的输出值 ...
- 手动安装pip
apt-get instal pip 成功之后,有根据pip的提示,进行了升级,升级之后,pip就出问题了 为了解决上面问题,手动安装pip,依次执行下面命令 1 2 3 4 5 [root@min ...
- 20. Spring Boot Servlet【从零开始学Spring Boot】
转载:http://blog.csdn.net/linxingliang/article/details/52069482 Web开发使用 Controller 基本上可以完成大部分需求,但是我们还可 ...
- matplotlib简易新手教程及动画
做数据分析,首先是要熟悉和理解数据.所以掌握一个趁手的可视化工具是很重要的,否则对数据连个主要的感性认识都没有,怎样进行下一步的design 点击打开链接 还有一个非常棒的资料 Matplotlib ...
- c#高级编程笔记----委托
因为定义委托基本上是定义一个新类,所以可以在定义类的任何相同地方定义委托,也就是说,可以在另一个类的内部定义,也可以在任何类的外部定义,还可以在名称空间中把委托定义为顶层对象.根据定义的可见性,和委托 ...
- jsp页面设置绝对路径
例子: 设置完之后就随便jsp页面放在哪个文件夹都可以加载到资源了 <%@ page language="java" contentType="text/html; ...
- C++再次理解虚表
#include <iostream> using namespace std; class Base { public: virtual void fun1() { cout <& ...
- java ArrayList倒序
用Collections.reverse(list)即可.如:List<String> list = Arrays.asList(new String[] {"aa", ...
- 后端程序员看前端想死(三)是不是该学点js了
CSS盒子模型 div布局 js 这些都懂一点,但仅仅是懂一点,有时间就学一下咯
- session自己定义存储,怎样更好地进行session共享;读tomcat7源代码,org.apache.catalina.session.FileStore可知
session自己定义存储.怎样更好地进行session共享: 读tomcat源代码,org.apache.catalina.session.FileStore可知 一.详见: 方法1 public ...