用css解决table文字溢出控制td显示字数(转)

【用css解决table文字溢出控制td显示字数(转)】的更多相关文章

用css解决table文字溢出控制td显示字数

场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/…

用css解决table文字溢出控制td显示字数(转)

场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/…

Css解决表格超出部分用省略号显示

小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ table-layout: fixed; ==>固定布局的算法.在这种算法中,表格和列的宽度取决于col对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度. 假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% (注意:此样式是关键) td{ white-space…

css+div解决文字溢出控制显示字数

一.一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/width:31em;word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :…

【css】table标签内的td、th如何设置固定宽度，而不是自适应？

table{ min-width: %; } td{ min-width: 100px; } .table-container{ overflow:auto; display: block; } <div class="table-container"> <table> <tr> <td></td> <td></td> <td></td> <td></td>…

css解决多行溢出显示省略号

多行溢出仅作为记录方便查找 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: number; /*n行溢出显示省略号则number设置为n*/ overflow: hidden;…

-webkit-line-clamp下多行文字溢出点点点...显示实例页面

overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 参考地址:http://www.css88.com/archives/5206…

css+div如何解决文字溢出

看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大,这个一般容易解决,但是我今天就遇到了这样的问题:在 IE6下测试页面没反应,在IE8下测试页面却正常处理了溢出文字,我就郁闷了,这个溢出处理不是IE特有的吗?怎么IE6却不正常呢.后来网上查了才知道,原来IE6只支持div内写上溢出处理才有用,而IE…

table不让td中文字溢出操作方法

table不让td中文字溢出操作方法 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示…

CSS 文本和表格中文字溢出显示省略号

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;…

CSS 文字溢出时的自动隐藏

http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪切内容也不添加滚动条.假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小.并且clip属性设置将失效. auto:此为body对象和textrea的默认值.在需要时剪切内容并添加滚动条 hidden:不显示超过对象尺寸的内容.scroll:总是显示滚动条. 实例代码如下…

解决table不能换行的问题与CSS之自动换行总结

table不能换行问题一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:style="table-layout:fixed; word-break: break-all; overflow:hidden;" 复制代码在单元格属性里加入上面这句,如:<td style="table-layout:fixed; word-break: break-all; overflow:hidden;"…

table 中文字长度大于td宽度，导致文字换行解决方案

1.TD不换行 nowrap属性表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行.当然可以通过对每列td都设置宽度,那样太麻烦了,并且有时没法预计td中的文字会有多长,没法给固定宽度. 为了让表格里文字不换行(预计也不会太长的字符串),可以给表格里td添加一个nowrap属性,如 <td nowrap>文字内容</td> 这样. 但是如果…

CSS——div内文字的溢出部分用省略号显示

使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分用省略号显示代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例子</title> <style> /* 单行文字末尾省略号显…

td文字溢出显示省略号

昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflow:ellipsis;//显示省略号 } 然后查了查网上遇到的类似问题,用table-layout:fixed;可以解决此问题,但是我发现这个方法并不完美,甚至改变了我设置的td的大小,本来以30%和70%的显示的td,设置此属性之后居然以50%和50%显示,这就让我不爽了.于是乎花了好长时间解决这…

CSS控制图片和文字在同一行显示且对齐的3种方法

CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法有3种:1.通过添加css的“vertical-align:middle;”:2.如果图片是背景图片,可以在css中设置背景图片:3.把文字和图片分别放入不同的div中.上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应用一下. 1.添加上“vertical-align:middle”属…

解决table td里面长串数字或字母不换行的问题

在html中,经常要用到table标签,一般情况下,table下面的td元素里的东西都是汉字或者说是汉字.字母.数字的混合,在这种情况下,不设置table的宽度,也就是table宽度自适应的时候,浏览器如果缩小的话,table里面的内容会跟随浏览器的宽度换行.这个大家都清楚.但是如果td里面的内容都是纯数字或者纯字母,而且没有空格,会是什么情况呢?下面看看: <table border="1"> <tr> <td>aaaaaaaaaaaaaaaaaa…

CSS文字溢出部分自动用"..."代替

CSS文字溢出部分自动用"..."代替如html部分: <h4><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></h4> <p>上海出发,机+酒包含:早晚餐+快艇</p> CSS样式 #tour h4{ white-space: nowrap; /*文本不换行*/ overflow: hidden; /*溢出部分隐藏*/ text-overflow: ellipsis; /*溢出部分用"..."代替…

单行文字溢出和多行文字溢出省略号显示的CSS样式

单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{$vo.title}</h6> 多行文字溢出,CSS样式 <p style="width:360px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:…

css 一行或多行文字溢出以...的形式隐藏

一行文字溢出以...形式隐藏我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出以...形式隐藏(针对webkit内核浏览器) css代码如下: display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; 注意!-webkit-line-clamp:2; 这是2…

css文字溢出显示省略号

1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;//控制文本现实的行数 overflow: hidden;…

css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在列表样式里添加css,如下图. 修改后效果: 正文开始 (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的类名用于复用. .line-limit-length { overflow: hidden; text-overflow: ellipsis; whit…

CSS清除浮动&内容居中&文字溢出

学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>.(增加无意义标签不建议使用) <ul> <li style="float: left;"></li> <li style="float: left;"></li> <li style="floa…

CSS文字溢出处理问题

单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出处理:隐藏 } 多行省略非IE和火狐 div { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertival; overflow:hidden; } -IE和火狐 .fade { position: relative…

优化 html 标签为何能用HTML/CSS解决的问题就不要使用JS？

优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有margin.background等初始化设置,另外可能会觉得不用div还能用啥.所以看他的页面,一展开是div,再展开还是div,展开四.五层都是div. 这样对用户来说虽然没什么区别,但是作为一名有追求的程序员,这种写法看起来是比较难受的.有些人虽然知道html5新增了很多标签,但也不怎么去研究它…

【CSS】Table样式

一.table td的宽度详解 Table只有Table的宽度是可以设置的,并且各个浏览器理解一致原则上应该将table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值 Table的宽度为600px,Table的td所有宽度总和不到600px,浏览器会自动按照td的宽度的比例算出宽度 <table style="width: 600px;border-collapse: collapse;border:1px solid" > <tr> <t…

Effective前端1：能使用html/css解决的问题就不要使用JS

div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme-info .field{font-weight:bold}#crayon-theme-info .field,#crayon-theme-info .value{margin-left:5px}#crayon-theme-info .description.value{font-style:ital…

[转]能用HTML/CSS解决的问题就不要使用JS

原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 在正常态时,每个导航的默认样式为: nav li{…

能使用html/css解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 在正常态时,每个导航的默认样式为: 正常态透明度为0.5 CSS 1 2 3 nav li{ opacity:0.5; } 当前页面的导…

打败 IE 的葵花宝典：CSS Bug Table

博主说:本博客文章来源包括转载,翻译,原创,且在文章内均有标明.鼓励原创,支持创作共享,请勿用于商业用途,转载请注明文章链接.本文链接:http://www.kein.pw/?p=35 原文发表于:Alipay UED Blog – 打败 IE 的葵花宝典:CSS Bug Table 作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示.当然,还有性能问题.不过,今天要说的是样式的兼容问题.在IE/Mozilla/Webkit/Ope…