当容器内容宽度超过容器宽度时显示省略号

本文介绍了一个IE浏览器特有的CSS样式属性text-overflow。该属性用于设置文本溢出时是否使用省略号来表示。文章详细解释了text-overflow的语法及取值,并通过示例展示了其实际应用。
  • 名称:text-overflow
    分类:IE专有样式
    简述:设置是否使用省略号标示文本溢出
    概述:text-overflow是设置是否使用省略号标示文本溢出的样式(Style)。
    •  
    • text-overflow详细说明

    • 语法:

      text-overflow : clip | ellipsis

      取值:

      clip : 默认值。不显示省略标记(...),而是简单的裁切
      ellipsis : 当对象内文本溢出时显示省略标记(...)

      • 例1:
        代码:<div style="overflow: hidden; width: 60px; text-overflow:ellipsis">www.czbin.cn</div>
        显示效果:
        www.czbin.cn

        注:只在IE下此示例才有效果
     
若要设置 CSS 样式让超出容器最大宽度内容省略号替代,可根据文本是单行还是多行采用同的方法。 ### 单行文本省略 对于单行文本,可使用以下 CSS 样式来实现超出容器最大宽度内容省略显示: ```css .single-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 在上述代码里,`display: block` 是为了让元素作为块级元素显示;`white-space: nowrap` 能让文本在一行显示进行换行;`overflow: hidden` 会隐藏超出容器的部分;`text-overflow: ellipsis` 则会在文本超出容器省略号替代超出部分 [^4]。 ### 多行文本省略 #### -webkit-line-clamp 方案 使用 WebKit 私有属性 `-webkit-line-clamp` 配合 `-webkit-box-orient` 实现,示例代码如下: ```css .multi-line-webkit { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 显示的行数 */ overflow: hidden; } ``` 这种方法简单高效,但仅 WebKit 内核浏览器支持 [^3]。 #### 伪元素遮罩方案 利用绝对定位的伪元素覆盖文本末尾,制造省略号效果: ```css .multi-line-pseudo { position: relative; line-height: 1.5em; max-height: 4.5em; /* 3 行的高度 */ overflow: hidden; } .multi-line-pseudo::after { content: "..."; position: absolute; bottom: 0; right: 0; background-color: white; padding-left: 4px; } ``` 该方法是纯 CSS 实现、兼容性好,但省略号位置精确、背景必须为纯色 [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值