css内容超过宽度显示省略号没效果,文字超过两行折叠省略

实现代码

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

没效果解决方案:放置文字的元素使用块级元素 例如p,div,不要使用span等行内元素。

例:

// css
.text{
	width: 50px;
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
}
// html 
<p class="text">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

文字超过两行及以上折叠省略

overflow:hidden;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
text-overflow:ellipsis;//溢出部分用省略号代替
-webkit-line-clamp:2; //设置文本显示两行
-webkit-box-orient:vertical;  //从上到下排列子元素;
white-space:normal;

 

在 JavaScript 中,为了实现元素内容的原生展开和收起功能,并在超过两行显示省略号,可以利用 HTML 的 `...` 作为占位符,并结合 CSS 和一些简单的 JavaScript 来控制隐藏或展示更多内容。这里是一个基本的例子: 首先,在 HTML 中创建一个包含可折叠内容的容器: ```html <div id="content" class="collapsible"> 这是一段很长很长的文字,可能会超出两行... </div> ``` 然后在 CSS 中设置样式,比如默认状态下的内容高度为两行超出部分隐藏: ```css .collapsible { max-height: 40px; /* 可调整为两行的高度 */ overflow: hidden; transition: max-height 0.5s ease; } ``` 接着,编写 JavaScript 代码来添加点击事件处理,切换内容的高度: ```javascript const content = document.getElementById('content'); const expandButton = document.createElement('button'); expandButton.textContent = '展开'; expandButton.addEventListener('click', function() { content.style.maxHeight = 'none'; }); content.appendChild(expandButton); // 如果你想添加自动收起的功能,可以在适当的地方添加判断条件 // 比如当内容高度大于一定值时,自动收起 expandButton.addEventListener('mouseleave', function() { if (content.scrollHeight > content.clientHeight) { content.style.maxHeight = '40px'; } }); ``` 这样,当你点击“展开”按钮时,内容会完全显示;离开按钮时,如果内容长度超过两行,它又会被隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值