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

  1. 场景：

    最左边这栏我不行让他换行，怎么办呢？

    下面是解决办法：

    [plain] view plain copy

    1. table{
    2. width:100px;
    3. table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    4. }
    5. td{
    6. width:100%;
    7. word-break:keep-all;/* 不换行 */
    8. white-space:nowrap;/* 不换行 */
    9. overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    10. text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
    11. }

    参考：http://www.52design.com/html/201007/design201071123721.shtml

    现在：

时间： 2024-08-03 18:54:57

用css解决table文字溢出控制td显示字数的相关文章

文字溢出不换行显示省略号

单行 white-space: nowrap; text-overflow:ellipsis width: 200rpx; overflow:hidden; 多行display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 原文地址:https://www.cnblogs.com/zzzzzzzsy/p/8720018.html

用JS解决多行溢出文本的省略问题

前言 在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支持了.但是多行文本,目前支持webkit内核的css样式 -webkit-line-clamp 可以做到,但它针对火狐浏览器就行不通了.这就是本文要解决的问题. css解决方案(可跳过) 如果上网搜索[多行文本省略],除了上文提到的css样式控制,找到的答案都是做固定位置的遮盖,而且能发现的是,目前

css解决td单元格内文字溢出

td单元格内显示的文字太长时,总是会自动分行,把表格撑高了,或者密密麻麻的一片,总是不好看~ 俺一开始的做法是用php的mb_substr()来截取定长的字符串,但是,因为中英文字节的差异,比如,10个中文字符就比10个英文字符要长得多,在网页上显示起来就忽长忽短,无法对齐,很不美观~ ~解决办法~ 第一步:<table>标签加样式:style="table-layout:fixed;"(一定要加,否则下面定义的td的样式都不起作用了) 第二步:<td>加样式:

css控制文字溢出用点(省略号)代替

兼容火狐.Opera.chrome的文字溢出添加省略号的功能,当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧. 示例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="

td文字溢出显示省略号

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

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

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

CSS:严格控制Table宽度和td宽度

Table会随着内容增加而变宽,即便使用了CSS也控制不住.必须对table使用table-layout: fixed才行. 例如: <table class='attIconTable' cellspacing='0' cellpadding='0' border='0' style='width:100%;table-layout: fixed;'> <tbody><tr><td style='width:24px'>xyz</td><

CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } </style> <table style="table-layout:fixed; width: 200px;"> <t

CSS 文字溢出处添加省略号

兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht