文本字数过多时,以省略号显示

# 文本字数过多时,以省略号显示

1、对于table中单元格中的字符数超过限定的宽度时,以省略号显示,但是当鼠标悬浮在上面时,能够完整地显示出单元格的内容。
设置表格的标头中字符数限制(让标头单元格宽度固定)
```style
#dataTab{table-layout: fixed}
#dataTab th{
width:80px;
white-space: nowrap; //设置如何处理元素内的空白
word-break:keep-all;//换行规则
//normal 使用浏览器默认的换行规则。
//break-all 允许在单词内换行,可以在一个单词内如hello中的hell出换行
//keep-all 只能在半角空格或连字符处换行,保证字符的完整
overflow:hidden;
text-overflow:ellipsis; // clip|ellipsis|string三种取值
//clip 修剪文本。
//ellipsis 显示省略符号来代表被修剪的文本。
//string 使用给定的字符串来代表被修剪的文本。
}
```
悬浮效果:
```style
#dataTab th:hover
{
text-overflow:inherit;
overflow:visible;
}
```

时间: 2025-01-19 23:16:03

文本字数过多时,以省略号显示的相关文章

文本溢出用省略号显示

文本溢出,分为单行文本溢出以及多行文本溢出, 单行文本溢出css代码如下: 1 p{ 2 overflow: hidden;//超出部分隐藏: 3 white-space: nowrap;//强制不换行: 4 text-overflow:ellipsis;//超出部分用省略号显示: 5 } 多行文本溢出css代码如下: 1 div{ 2 overflow: hidden; 3 text-overflow: ellipsis; 4 display: -webkit-box; 5 -webkit-l

css文本截字,超出文本省略号显示

一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: hidden;/*溢出隐藏*/ } 效果: 二.多行文本截字 p{ display:-webkit-box;/*设置盒子为弹性盒容器*/ -webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/ -webkit-line-clamp:2;/*显示两行*/ text

css实现文本超出部分省略号显示

一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: 1 div { // 单行 2 white-space: nowrap; 3 overflow: hidden; 4 text-overflow: ellipsis; 5 } 1 div { // 多行 2 overflow: hidden; 3 text-overflow: ellipsis; 4 display: -webkit-box; // 注意不是flex 5 -webkit-line-clam

单行文本和多行文本溢出以省略号显示方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .inaline{ overflow: hidden; white-space:nowrap;   //单行显示溢出以省略号显示方法 text-overflow: ellip

CSS自动截断表格内的长字符 以省略号显示

CSS自动截断表格内的长字符,以省略号显示,大家可能在一些网站看到过这样的效果,目的是让表格或布局更美观一些,但是不利于阅读,如果您可以能该属性加上title或链接的话那就利于网站体验了,您说是吗? <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上谷战

文本超过长度自动采用省略号

宽度不固定,超出宽度则以省略号"..."来表示. <div class="txt"> 文字文字文字文字文字,文字文字文字文字文字文字文字文字文字,文字文字文字文字文字文字文字文字文字,文字文字文字文字文字文字,文字文字文字文字文字 </div> .txt{ /*规定段落中的文本不进行换行:*/ white-space: nowrap; overflow: hidden; /* text-overflow属性表示规定当文本溢出包含元素时发生的事

溢出用省略号显示

overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行 //上面是一行内容的时候,当有两行的内容时候 overflow: hidden;text-overflow: ellipsis;display:-webkit-box; //作为弹性伸缩盒子模型显示.-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列-webkit

js数据显示在文本框中(页面加载显示和按钮触动显示)

web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is

CSS截取字符串,多余文字用省略号显示

最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面,用户头像70px,但是用户名没法限定啊,英文中文都可以,你说他要是取个"我的名字好长呀,你该怎么办呢",那老衲不就蛋疼菊花紧了~~ 幸好,老衲于不幸中的万幸中发现了css这么叼炸天的一面,以前一直不知道,写出来分享给大家 很简单,大屁不多放,直接开菊花: css里面如下设置: a.name{ line-height: 30px; text-align: center; text-overflow:ellipsis;//让超