请问省略文章的部分内容功能怎么实现？

请问省略文章的部分内容功能怎么实现？
就是文章内容很多。我怎样只让他显示一部分。其余的就显示一个片【全文阅读】？
如图：

回答

看了内容 是否可以参考这个思路
段落使用布局 四行 4️⃣列
第四行第一列用 css text-overflow:ellipsis
第四行第二列直接显示阅读全文
当然好像需要内容足够丰富撑满四行 不然需要自行判断有几行了

  1. col col col col

  2. col col col col

  3. col col col col

  4. col 阅读全文

多行啊 .... 有2种办法，
1.相对简单的是按字符数切割内容，然后+ ...
2.在WebKit浏览器或移动端，可以直接使用WebKit的CSS扩展属性: -webkit-line-clamp
注意!这是不规范的属性;unsupported WebKit property

你这里用js截取固定长度的内容就好了(slice、substring、substr)，然后加上三个"..."

就是默认截取下前多少位，如截取5个字符，然后后面加上...，点击阅读全文就显示所有的文字,如：

let str = '123456789';
str.slice(0,5)+'...'; //12345...
str; //123456789

讲道理，这个多行省略的实现，使用 slice 方案有一定的问题：
因为有可能由于字形和宽度未知，导致 slice 到标点符号，或者是省略号出现在第一行的情况，这些情况都是在现代语文符号使用规则中不推荐的：

slice 到标点符号：

多行文本多行文本多行文本多行文本
文本多行文本多行文本多行文本多行
多行文本多行文本文本，……

省略号出现在第一行：

多行文本多行文本多行文本多行文本
文本多行文本多行文本多行文本多行
……

-webkit-line-clamp 的方法其实是最好的，可惜兼容性不行。
可以试试这样：

  1. cloneChild 一个相同的文本框，遍历文本把单个文字一个个放进去

  2. 每放一个文字就取一下文本框的宽高，这样可以通过高度改变的 index 得知什么地方换行了

  3. 已知换行的文字 index，看看这个 index 前后是否是标点符号，进行裁剪

两种办法，一种css，兼容性不好，不推荐，一种是js分割，缺点是每行显示的字数是固定的，无法自适应页面宽度变化，使用str.match(/(.{40})/g) || []分割，40个字一行，其他逻辑就不说了

以上是 请问省略文章的部分内容功能怎么实现？ 的全部内容， 来源链接： utcz.com/a/40305.html

回到顶部