css超出部分显示省略号

目录

前言

一、CSS单行实现

二、CSS多行实现(CSS3出的,兼容性需要注意)

三、微信小程序超过2行出现省略号实现

四、JavaScript脚本实现


前言

CSS文本溢出就显示省略号,就是在样式中指定了盒子的宽度与高度,有可能出现某些内容在盒中容纳不下的情况,我们需要文本溢出就显示省略号。实现这个效果有两种方案啦,一种是CSS实现,还有一种是万能的JavaScript脚本实现啦,记录一下,方便大家Ctrl+V和Ctrl+C:

一、CSS单行实现

**white-space:**设置不换行,用来设置如何处理元素中的空白。

**overflow:**隐藏超出部分,定义当一个元素的内容太大而无法适应时,块级格式化上下文如何处理。它是overflow-x和overflow-y的简写属性。

**text-overflow:**添加省略号,确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...')或显示一个自定义字符串。

注意:必须有固定宽度才会出现效果。

html 复制代码
<style>
.wrap{
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<body>
    <p class="wrap">
      什么是溢出?如果在样式中指定了盒子的宽度与高度
    </p>
</body>

二、CSS多行实现(CSS3出的,兼容性需要注意)

**-webkit-line-clamp:**限制在一个块元素显示的文本的行数,可以把块容器中的内容限制为指定的行数。它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient属性设置成vertical时才有效果。

**-webkit-box-orient:**用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的,使用时需要注意兼容性。

html 复制代码
<style>
.wrap{
    width: 100px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
</style>
<body>
    <p class="wrap">
什么是溢出?如果在样式中指定了盒子的宽度与高度
什么是溢出?如果在样式中指定了盒子的宽度与高度
    </p>
</body>

三、微信小程序超过2行出现省略号实现

css 复制代码
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

四、JavaScript脚本实现

javascript 复制代码
/**
  * 超出部分显示···
  * num 控制显示字符长度,com控制显示dom元素
  */
  function mitulineHide(num,com){
    let contain = document.querySelector(com);
    console.log(contain);
    let maxSize = num;
    let txt = contain.innerHTML;
    if(txt.length > num){
      console.log(1)
      txt = txt.substring(0,num-1)+"...";
      contain.innerHTML = txt;
    }else{
      return;
    }
  }

  mitulineHide(50,"p");

欢迎在评论区交流。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下!博主会持续更新。。。。

我的博客原文:CSS超出省略。。。

往期回顾

CSS多栏布局-两栏布局和三栏布局

border边框影响布局解决方案

css 设置字体渐变色和阴影

css 重置样式表(Normalize.css)

css实现元素居中的6种方法

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

vite构建打包性能优化

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

ES6实用的技巧和方法有哪些?

css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击?什么是 CSRF?什么是点击劫持?如何防御

相关推荐
LAOLONG-C1 小时前
今日CSS学习浮动->定位
前端·css·css3
小桥风满袖2 小时前
Three.js-硬要自学系列15 (圆弧顶点、几何体方法、曲线简介、圆、椭圆、样条曲线、贝塞尔曲线)
前端·css·three.js
凌冰_3 小时前
CSS3 基础(背景-文本效果)
前端·css·css3
HtwHUAT3 小时前
五、web自动化测试01
前端·css·chrome·python·功能测试·selenium·html
2401_837088504 小时前
CSS清楚默认样式
前端·javascript·css
Haku Coder6 小时前
网络安全零基础培训 L1-7 Web基础和CSS渲染
前端·css
小桥风满袖7 小时前
Three.js-硬要自学系列14 (PBR材质、环境贴图、清漆层、物理材质透光率)
前端·css·three.js
星空寻流年7 小时前
css3新特性第七章(3D变换)
前端·css·3d
Dnn017 小时前
修改el-select背景颜色
css·elementui·vue3
面向对象面向君7 小时前
骨架屏不结束🏃🏻,CPU哪敢躺平🚨
css·element