`
tigerl
  • 浏览: 98825 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS让表格里的内容强制显示一行,超出长度显示省略号

阅读更多
在写html页面的时候,会经常用到表格,而且很多时候一个tr里边需要包含好几个td,这样就会导致tr的高度不一致,被撑开了
这时候,如果能让td里的内容强制显示在一行,并让超出边界范围的内容显示点点,然后再给td加个title属性,显示当前td的内容,这难道不是最理想的结果吗?

其实很简单,4行代码搞定它:
.table{
  table-layout: fixed;
}

.td{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}



需要注意的有:

1、table-layout需要设置为fixed,用来固定表格布局,(这个属性非常非常有用,对于提升页面性能,这样就不会每次当表格宽度变化的时候自适应td宽度。) 当然给每个td加宽度也可以,但是显然没有前者更高效
2、white-space需要设置为nowrap,用来强制不换行
3、overflow设置为hidden,内容溢出的时候不显示
4、text-overflow设置为ellipsis, 内容溢出的时候,溢出部分显示为...

很实用,有木有?
2
1
分享到:
评论

相关推荐

    css控制文本实现越界省略号以及自动换行

    这样,表格的每一列都将保持固定宽度,当单元格内的文本超出时,会显示省略号。 总结来说,CSS中的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`等属性是实现文本越界省略号的关键,而`...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    - `word-wrap: break-word`:尽可能保持单词完整,如果单词太长超出容器宽度,会将整个单词放到下一行。 这两个属性的适用场景不同,`break-all`更适合于需要严格控制宽度的场景,而`break-word`则更注重内容的...

    gridview一般换行,强制换行

    默认情况下,GridView会尝试适应内容,但如果内容过长,可能不会自动换行,而是截断或显示省略号。 1. **一般换行**:在默认情况下,GridView的单元格(cell)内的文本如果没有超过单元格宽度,会自动换行。但当...

    CSS 教程之内容设置的一些语法

    - `ellipsis`:显示省略号(...)代替被裁剪的内容。为了使`ellipsis`生效,通常需要将`white-space`设置为`nowrap`,并设置`overflow`为`hidden`,以隐藏超出的文本。 `word-break`属性用于控制单词内是否允许换行...

    GridView使用技巧

    10. **用“...”代替超长字符串**:通过设置`DataTextFormatString`属性,可以限制显示文本的长度,超出部分用省略号表示。 11. **一般换行与强制换行**:在单元格内使用` `标签实现换行,对于固定宽度的列可能...

    GridView的72般绝技

    - **功能概述**:当某个单元格中的文本过长时,用省略号代替超出的部分。 - **实现方式**:在模板列中使用HTML标签或JavaScript来限制文本长度,并显示省略号。 #### 11. GridView一般换行与强制换行 - **功能概述*...

    GridView_72般绝技

    为了防止超长字符串导致布局问题,可以限制文本长度,并使用省略号代替超出的部分。 **实现方式:** 1. 在`ItemTemplate`中使用`Eval`表达式和`String.Format`方法。 2. 例如:`(Eval("TextField") != null ? ...

    html、css 禁止文字自动换行属性word-break

    4. `break-word`:这是CSS3新增的值,它会尝试保持单词的完整性,但当单词太长以至于无法在一行内显示时,会在单词内部的一个合适位置进行断行。这通常用于处理超长的自定义词汇或URL。 在描述中提到的解决方案是...

    设置table中的宽度不随文字改变让其固定

    如果不想让文字换行,而是希望超出的内容被隐藏,并显示省略号,可以使用以下CSS样式: ```html ; white-space: nowrap; text-overflow: ellipsis;">长文本内容... ``` 这种方法在大多数现代浏览器中都能正常工作...

Global site tag (gtag.js) - Google Analytics