[前端] 实现单行文本溢出和多行文本溢出省略

项目中经常会用的标题或摘要超出省略的功能，从网找了一些参照，在这里写一下，希望对你有帮助。。。

一、单行文本溢出省略

CSS样式：

<style>.box {width: 120px;height: 100px;background: green;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
</style>

知识点：

1、white-space: nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

HTML布局：

<div class="box"><a href="javascript:;">天涯何处无芳草，TMD就是找一到</a>
</div>

效果：

二、多行文本溢出省略

CSS样式：

<style>.box {display: -webkit-box;width: 120px;height: 100px;background: green;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;}
</style>

知识点：

1、word-break：break-all 允许在单词内换行

2、box-orient：vertical 子元素垂直排列

3、-webkit-line-clamp：指定到多少行出现省略号

HTML布局：

<div class="box">天涯何处无芳草，TMD就是找不到天涯何处无芳草，TMD就是找不到天涯何处无芳草，TMD就是找不到
</div>

效果：

谢谢关注~

[前端] 实现单行文本溢出和多行文本溢出省略相关推荐

单行文本溢和多行文本溢出
一.单行文本溢出最常见的使用,直接贴出代码: .text {white-space: nowrap;text-overflow: ellipsis;overflow: hidden; } 二.多行文 ...
[css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
单行文本溢出和多行文本溢出省略...
平时在开发过程中,很常见的需求就是文字溢出显示... 此类需求有以下集中方法来解决 1. 单行溢出显示... overflow:hidden; width: 200PX; white-space:n ...
单行文本省略号和多行文本省略号
1.单行文本省略号 overflow:hidden; //多余的部分隐藏 white-space:nowrap; //让文字强制一行显示 text-overflow:ellipsis; //多余的部分 ...
单行文本垂直居中和多行文本垂直居中以及font字体
单行文本垂直居中 <style>*{margin: 0;padding: 0;}.box{width: 300px;margin: 20px auto 0;border: 1px soli ...
css：实现文本两行或多行文本溢出显示省略号
div{display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;word-wrap: break-word; w ...
CSS基础：单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
CSS中的单行、多行文本溢出总结
文章目录写在前面一.用到的相关属性 1.white-space 2.word-break 3.text-overflow: 4.`overflow` 二.单行文本溢出三.多行文本溢出写在前面 ...

[前端] 实现单行文本溢出和多行文本溢出省略

一、单行文本溢出省略

二、多行文本溢出省略

[前端] 实现单行文本溢出和多行文本溢出省略相关推荐

最新文章

热门文章