当前位置:首页 > 技术分享 > 正文内容

css超出隐藏显示省略号

admin2个月前 (01-27)技术分享367

在CSS中,如果你想实现文本超出容器宽度时显示省略号(...),你可以使用 text-overflow 属性。这通常与 white-space 和 overflow 属性一起使用。下面是如何实现的步骤:


  1. 设置容器宽度:首先,确保你的容器有一个明确的宽度。

    使用 white-space 属性:将 white-space 设置为 nowrap,这样文本就不会换行。

  2. 使用 overflow 属性:将 overflow 设置为 hidden,这样超出容器宽度的文本就会被隐藏。

    使用 text-overflow 属性:将 text-overflow 设置为 ellipsis,这样超出部分就会显示为省略号(...)。


示例代码

.container {
  width: 200px; /* 设置容器宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}


HTML 示例

<div class="container">  这是一段很长的文本,它应该会在容器宽度超出时显示省略号。</div>

注意事项


  • 多行文本:如果你需要在一个容器中实现多行文本的超出部分显示省略号,你需要结合使用 display: -webkit-box;-webkit-line-clamp 和 -webkit-box-orient 属性(这在较新的浏览器中支持)。例如:

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示的行数为3 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


  • 注意:-webkit-line-clamp 目前只在基于WebKit的浏览器(如Chrome和Safari)中支持,对于其他浏览器,你可能需要寻找替代方案或使用JavaScript来实现。


使用JavaScript实现多行文本省略号

如果你需要支持所有浏览器,你可以使用JavaScript来实现多行文本的省略号效果。以下是一个简单的示例:

function truncateText(selector, maxLines) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(el => {
    const lineHeight = parseInt(window.getComputedStyle(el).lineHeight, 10);
    const height = el.offsetHeight;
    const remainingHeight = height - (maxLines * lineHeight);
    if (remainingHeight > 0) {
      el.style.height = `${height - remainingHeight}px`; // 设置合适的高度以显示省略号
      el.style.overflow = 'hidden'; // 隐藏溢出的文本
      el.innerHTML += '<span>...</span>'; // 添加省略号
    }
  });
}

然后你可以在文档加载完成后调用这个函数:

document.addEventListener('DOMContentLoaded', () => {
  truncateText('.multiline-ellipsis', 3); // 选择器为你要应用多行省略的元素,3是最大行数
});

这样,无论是在较新的浏览器还是旧版浏览器中,你都可以实现多行文本的省略号效果。


扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:http://blog.bitefu.net/post/646.html

标签: css
分享给朋友:

相关文章

input search更改默认删除按钮的样式

改input输入框search属性下输入文字之后会在输入框最后出现一个默认样式的X不过这个样式不太好看想自定义怎么办呢方法一input[type="search"]::-webkit-search-cancel-butt...

[教程] WTG备份新方法——FFU镜像格式

[教程] WTG备份新方法——FFU镜像格式

FFU(Full Flash Update) 格式是一种基于扇区的磁盘镜像文件格式,默认使用快速哈夫曼压缩(Xpress-Huffman)算法压缩,在捕获和部署时会生成哈希表进行校验,并可以使用DISM修改捕获的镜像。FFU格式很适合WTG...

贾氏鸣天鼓健耳养肾操

贾氏鸣天鼓健耳养肾操

《贾氏鸣天鼓健耳养肾操》鸣天鼓是健耳强肾治耳病的古法,贾氏越云自创的鸣天鼓健耳养肾操是在古法的基础上创建。顺序:1静坐挺胸。2双手放心脏位置的胸口,左手掌盖住右手掌。3闭目静心,深呼吸19下。4双手相互搓揉,让手掌发热。5用发热的双手手掌严...

PHP AES加解密 (ECB模式/sha1prng算法/PKCS5Padding和PKCS7Padding补码) ECB 模式不需求设置 iv

php7+ 版本/**  * [AesSecurity aes加密,支持PHP7+]  * 算法模式:ECB  * 密钥长度:128  * 补...

php Aes 加密模式ECB填充pkcs5padding base64

最近做支付项目用到了aes加密不过试了好多办法总是和官方给出的结果不一样,找了很久终于找到了测试结果同 http://tool.chacuo.net/cryptaes/ <?php /**  * [Aes&nb...

Chrome 最全历史版本下载以及chromedriver下载

https://vikyd.github.io/download-chromium-history-version/#/ https://dl.lancdn.com/landian/soft/chrome/m/ chromedriver的版...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。