div超出不换行_CSS处理文字超出x行用...代替

最新推荐文章于 2024-04-01 15:08:15 发布

文大嘴

最新推荐文章于 2024-04-01 15:08:15 发布

阅读量1.4k

点赞数

文章标签： div超出不换行

本文链接：https://blog.csdn.net/weixin_30046591/article/details/112404365

版权

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>

我写这个的目的只是为了抛砖引玉，如果大家有什么更好的更简单的解决办法，欢迎分享！

文大嘴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div超出不换行_CSS处理文字超出x行用...代替

2019/4/23日更新由于目前在国内前端框架最为火爆的莫过于VUE了，而在实际开发中很多我们平时看似简单的问题，都会变得复杂起来，所以我推荐大家使用另外一个和vue相关的组件。vue-clamp官网：Justineo/vue-clamp使用文档https://justineo.github.io/vue-clamp/demo/非常简单及方便，下面是一个官方给出的样例<template&gt...
复制链接

扫一扫