2019/4/23日更新
由于目前在国内前端框架最为火爆的莫过于VUE了,而在实际开发中很多我们平时看似简单的问题,都会变得复杂起来,所以我推荐大家使用另外一个和vue相关的组件。
vue-clamp官网:Justineo/vue-clamp
使用文档https://justineo.github.io/vue-clamp/demo/
非常简单及方便,下面是一个官方给出的样例
<template>
<v-clamp autoresize :max-lines="3">{{ text }}</v-clamp>
</template>
<script>
import VClamp from 'vue-clamp'
export default {
components: {
VClamp
},
data () {
return {
text: 'Some very very long text content.'
}
}
}
</script>
---------------------------------------------------------以下为原答案------------------------------------------------------------------------------------------
在前端日常中,文字超出x行用...代替需求还是挺多的,一般一行倒是好处理,直接百度一下就能很好的解决问题
overflow: hidden;//盒子溢出隐藏
text-overflow:ellipsis;//文字溢出显示省略号
white-space: nowrap;//文字不换行
但是当需求变为超过x行就比较烦人了,我们可以使用下面这段段代码实现需求,但是由于-webkit-line-clamp在火狐上并不兼容,所以在实际开发中并没什么用。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;//盒子溢出隐藏
今天我要为大家带来的是一款s插件,他就是clamp.js,官网:josephschmitt/Clamp.js
完美解决浏览器兼容的问题,而其大小也只有10kb左右,使用分厂简单,样例中已有cdn地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两行文字多余变为省略号</title>
<script src="https://cdn.bootcss.com/Clamp.js/0.5.1/clamp.js"></script>
<style type="text/css">
p{background: pink}
body{background: skyblue}
</style>
</head>
<body >
<p id="clamp">《葬花吟》是清代文学家曹雪芹的小说《红楼梦》第二十七回中女主角林黛玉所吟诵的一首古体诗。此诗通过丰富而奇特的想象,暗淡而凄清的画面,浓烈而忧伤的情调,展示了黛玉在冷酷现实摧残下的心灵世界,表达了她在生与死、爱与恨复杂的斗争过程中所产生的一种焦虑体验和迷茫情感。它是林黛玉感叹身世遭遇的全部哀音的代表,也是曹雪芹借以塑造黛玉这一艺术形象、表现其性格特性的重要作品。</p
</body>
</html>
<script type="text/javascript">
var node=document.getElementById("clamp");
$clamp(node,{clamp:2});
</script>
我写这个的目的只是为了抛砖引玉,如果大家有什么更好的更简单的解决办法,欢迎分享!