FFan丶Blog / CSS / / CSS自动隐藏超出宽度的内容

CSS自动隐藏超出宽度的内容

分类:CSS 发布时间:2020-04-13 13:31:24来源:FFan丶Blog
一般的文字截断(适用于内联与块):.text-overflow {     display:block;/*内联对象需加*/     width:31em;/*指定宽度*/     word-break:keep-all;/* 不换行 */...

一般的文字截断(适用于内联与块):

.text-overflow {
    display:block;/*内联对象需加*/
    width:31em;/*指定宽度*/
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* IE 专有属性,当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的处理:

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

猜你喜欢

  • /* 核心样式:限制p标签最多显示2行,超出隐藏 */ p {   /* 基础布局:必须设置宽度(否则无法触发截断) */   width: 300px; /* 可根据实际需求调整,比如100% */

    CSS2026-03-13
  • 这两个标签都能实现表单提交按钮,但用法、功能、兼容性差异很大,以下是详细对比:一、核心区别一句话总结<input type="submit">:纯文本按钮,只能显示文字,不能嵌套标签,样式限制多。<button>:容器型按钮,可以放文字、图片、图标、HTML 标签,功能更强、更灵活。二、代码用法对比1. <input type="submit">语法格式:<input type="submit" value="提交表单"&g

    html相关标签2026-04-14