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

css超出隐藏显示省略号

admin1个月前 (01-27)技术分享330

在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是最大行数
});

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


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

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

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

标签: css
分享给朋友:

相关文章

百度云网盘高速下载方法[测试可用]

百度云网盘高速下载方法[测试可用]

大前提这是一个油猴脚本,安装脚本之前,必须先安装油猴浏览器扩展(如已安装则跳过):【第一步】下载油猴 --> 如有提示安装,则直接安装即可,否则继续执行第二步【第二步】安装油猴 --> 参考其中章节:&nbs...

[教程福利] Python 全网比较全面的资源

阿里 Python 应该算比较全面了,编辑完了差不多用了三个小时左右,如果对你有帮助,给个免费的热心吗,在这里谢谢了各位大佬。092-****实战课-畅销3年的Python分布式爬虫课程-原版提取https://www.aliyundriv...

Linux/centos inode 占用100%的解决办法

当你的 Linux 系统无法创建新文件时,有可能是你的磁盘满了,还有可能是你的磁盘的 inode 用光了,我们今天要说的就是后一种情况,要解决这个问题,只能是删除一些文件,但是一般情况下,其实是你的系统中的某个地方产生了大量的你并不需要的文...

全世界最快dns分享 Public DNS Server List

偶然发现一个共享全世界最快dns的网站,当然也包含中国了https://public-dns.info/ 中国https://public-dns.info/nameserver/cn.html...

redis 设置过期Key 的 maxmemory-policy 六种方式

平时会用到redis 当缓存过多时会遇到下面的报错OOM command not allowed when used memory > 'maxmemory'这说明redis的缓存满了我们可以通过修改过期策略来修改cd...

Bootstrap动态切换主题(通用)

bootstrap有个网站叫做bootswatch,其中已经设计了一些很美的主题:要想使用也是很简单的,只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话,...

发表评论

访客

看不清,换一张

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