表格中文本一行显示,超出部分用省略号代替。

简介: table{table-layout:fixed;width:100px;} .table tr td:nth-child(4){ text-align: left; padding-left: 10px; width: 20%; word-break:keep-all;  //规定自动换行的处理方法;keep-all:只能在半角空格或字符处换行。
<style>
        table{table-layout:fixed;width:100px;}       
        .table tr td:nth-child(4){
            text-align: left;
            padding-left: 10px;

            width: 20%;
            word-break:keep-all;  //规定自动换行的处理方法;keep-all:只能在半角空格或字符处换行。
            overflow: hidden;    //当内容溢出元素框时发生的事情。
            text-overflow: ellipsis; // ellipsis:显示省略符号来代表被修剪的文本。
            white-space: nowrap;  //white-space:如何处理元素内的空白; nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
        }
 </style>

  

目录
相关文章
|
5月前
span标签显示固定长度显示省略号,光标放上显示全部
span标签显示固定长度显示省略号,光标放上显示全部
|
7月前
|
前端开发
CSS 限制文字行数(超出显示省略号...)
CSS 限制文字行数(超出显示省略号...)
79 0
|
JavaScript 前端开发
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
5月前
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
115 0
文本超出显示省略号--截取字段
文本超出显示省略号--截取字段
|
10月前
多行文本溢出显示省略号
多行文本溢出显示省略号
44 0
|
容器
p标签字数过多显示省略号
p标签字数过多显示省略号
673 0