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

css超出隐藏显示省略号

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

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

相关文章

WPS表格办公—取消科学计数法显示

WPS表格办公—取消科学计数法显示

我们在利用WPS表格与Excel表格进行日常办公时,经常需要制作各种各样的表格,当我们在表格当中输入长数据的时候,表格经常会自动显示为科学计数法,很多人都看不懂科学计数法的意思,那么,我们如何在输入长数字的时候避免显示为科学计数法呢,今天我...

解决 SVN Skipped 'xxx' -- Node remains in conflict

更新命令:svn up提示代码:意思就是说 ,这个文件冲突了,你要解决下Updating '.': Skipped 'data/config.php' -- ...

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

随着 2021 年的到来,Adobe Flash Player 也迎来了告别,Adobe 在 2020 年 12 月 31 日后将不再支持 Flash Player。其实早在 2017 年,Adobe 公司就已宣布,计划在 2020 年底逐...

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版:Windows 10X是Windows 10操作系统的新版本,主要针对双屏电脑。由于即将运行Windows 10X的双屏电脑(例如即将面世的Surface Neo)的开发遇到挫折,...

php Aes 加密模式ECB填充pkcs5padding base64

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

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

究发现很多网站被攻击都是来自海外的肉鸡,所以禁掉海外IP访问网站也是不错的防护手段,而且国内网站几乎很少有国外用户访问,称之为大局域网也不为过。今天主机吧来教大家如何利用域名解析禁止掉海外IP访问网站。绝大多数域名解析服务商都是提供电信联通...

发表评论

访客

看不清,换一张

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