h5做网站教程,企业网站建设公司怎么做,微信商城小程序多少钱,手机报价目录
前言
一、CSS单行实现
二、CSS多行实现#xff08;CSS3出的#xff0c;兼容性需要注意#xff09;
三、微信小程序超过2行出现省略号实现
四、JavaScript脚本实现 前言
CSS文本溢出就显示省略号#xff0c;就是在样式中指定了盒子的宽度与高度,有可能出现某些内…
目录
前言
一、CSS单行实现
二、CSS多行实现CSS3出的兼容性需要注意
三、微信小程序超过2行出现省略号实现
四、JavaScript脚本实现 前言
CSS文本溢出就显示省略号就是在样式中指定了盒子的宽度与高度,有可能出现某些内容在盒中容纳不下的情况我们需要文本溢出就显示省略号。实现这个效果有两种方案啦一种是CSS实现还有一种是万能的JavaScript脚本实现啦记录一下方便大家CtrlV和CtrlC 一、CSS单行实现 white-space设置不换行用来设置如何处理元素中的空白。
overflow隐藏超出部分定义当一个元素的内容太大而无法适应时块级格式化上下文如何处理。它是overflow-x和overflow-y的简写属性。
text-overflow添加省略号确定如何向用户发出未显示的溢出内容信号。它可以被剪切显示一个省略号...或显示一个自定义字符串。
注意必须有固定宽度才会出现效果。
style
.wrap{width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
/style
bodyp classwrap什么是溢出?如果在样式中指定了盒子的宽度与高度/p
/body 二、CSS多行实现CSS3出的兼容性需要注意 -webkit-line-clamp限制在一个块元素显示的文本的行数可以把块容器中的内容限制为指定的行数。它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient属性设置成vertical时才有效果。
-webkit-box-orient用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的使用时需要注意兼容性。
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
bodyp classwrap
什么是溢出?如果在样式中指定了盒子的宽度与高度
什么是溢出?如果在样式中指定了盒子的宽度与高度/p
/body 三、微信小程序超过2行出现省略号实现 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脚本实现 /*** 超出部分显示···* 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什么是点击劫持如何防御
