CSS- 文本超出指定宽度后隐藏并显示为省略号
CSS 显示 指定 文本 隐藏 宽度 超出 省略号
2023-09-27 14:21:25 时间
一般的文字截断(适用于内联与块):
.text-overflow {
display:block;/*内联对象需加*/
width:25em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
对于表格文字溢出的定义:
对于表格超出范围显示省略号
table{
width:25em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
如:
------------------------------------------------------------------------------------------------
如果想鼠标悬停省略号显示内容就 在title 那里写好即可~
代码:
<style type="text/css"> #div1{ padding: 10px; width: 200px; height:30px; text-shadow: 3px 3px 3px #aaaaaa; border: 1px solid #999999; text-overflow: ellipsis; overflow: hidden; word-break: break-all; white-space: nowrap; } </style> <body> <div id="div1" title="AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD"> AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD </div> </body>
相关文章
- HTML+CSS网站开发兵书
- 纯CSS实现各类气球泡泡对话框效果
- AjaxControlToolkit没有通过WebResource.axd加载css导致ajaxToolkit:TabPanel无法显示正确的样式
- 小程序/CSS实现单行与多行文本溢出显示省略号
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
- CSS - 开启 contenteditable 属性时,去掉点击编辑时显示的 “黑边框“(完美解决方案)
- CSS - display flex 弹性布局实现一行仅显示 2 个,每行显示指定个数(设置 space-between / space-around 超出自动换行)详细示例代码
- CSS基本布局——flex布局
- VScode&快捷使用的方式 以及css伪类选择器
- 《jQuery UI 开发指南》——1.3 什么是CSS主题
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.2 Web浏览器
- 《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——导读
- 掀开图片显示介绍的css效果
- 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题
- CSS学习:overflow:hidden解决溢出,坍塌,清除浮动
- CSS实现内容超过长度后以省略号显示
- css flex弹性布局学习总结
- css 弹性盒子(flex布局)的起边和终边详解
- css 去除input 获取焦点的蓝色边框
- css实现一行文字居中,多行文字左对齐
- 浅析css中的BFC、IFC、GFC和FFC
- 四个好看的CSS样式表格
- CSS文本溢出显示省略号
- css设置文字不能被选中