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

css超出隐藏显示省略号

admin6个月前 (01-27)技术分享659

在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
分享给朋友:

相关文章

centos 配置Let's Encrypt 泛域名https证书

centos 配置Let's Encrypt 泛域名https证书

前言2018年1月份Letsencrypt可以申请泛域名证书,这让我们部署多域名、多站点https省了很多功夫,终于可以不用维护多个域名的https证书。笔者以acme.sh为例,手把手教你配置https证书~本教程适用于centos 6....

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 是基于VirtualApp 和 epic 在非ROOT环境下运行Xposed模块的实现(支持5.0~10.0)。与 Xposed 相比,目前 VirtualXposed 有...

Nginx服务崩溃自动重启脚本(监控进程服务并自动重启进程服务)脚本

有一台服务器运行着Ngin最近突然有一次崩溃,导致使用方当天无法访问网页端,然后我不得不登录服务器,检查各项服务,发现nginx崩溃了,于是重启Nginx,问题解决。后来为了防止Nginx再发生这种情况给运维带来的运维成本,于是写了一个脚本...

七牛html js上传带进度条源码

七牛html js上传带进度条源码注册链接https://s.qiniu.com/uM7RJv完整代码下载:https://n802.com/f/349707-489018989-c141f6(访问密码:5036)http://www.yi...

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

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

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

apicloud影视APP源码 无需后台

apicloud影视APP源码 无需后台

介绍集合vip影视接口到一个android app中 方便观看各平台影视资源及直播开源地址:https://gitee.com/web/vip_yingshi软件架构使用apicloud搭建影视APP源码,无后台,调用接口同步api解析网址...

发表评论

访客

看不清,换一张

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