CSS省略号text-overflow超出溢出显示省略号

最新推荐文章于 2024-04-21 22:40:04 发布
最新推荐文章于 2024-04-21 22:40:04 发布
阅读量2.4k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ayangjing/article/details/22524319
版权 
<pre name="code" class="html"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>css省略号text-overflow超出溢出显示省略号</title>
	<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	a{
		text-decoration: none;
		color: #6699ff
	}
	ul,li{
		list-style: none;
		text-align: left;
	}
	#divcss5{
		border:1px solid #ff8000;
		padding: 10px;
		width: 150px;
		margin-left: 10px;
		margin-top:10px;
	}
	#divcss5 li{
		width: 150px;
		height:24px;
		line-height: 24px;
		font-size: 12px;
		color: #6699ff;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space: nowrap;
	}
	</style>
</head>
<body>
<ul id="divcss5">
	<li><a href="#">显示不完显示省略号，测试内容</a></li>
	<li><a href="#">第二排测试内容超出显示省</a></li>
	<li><a href="#">能显示完几个字</a></li>	
</ul>
</body>
</html>

text-overflow省略号样式总结

要想隐藏溢出内容同时又想让过多内容以省略号样式显示，需要用到css overflow,和text-overflow样式，同时避免文字自动换行我们使用white-space:nowrap标签强制内容不换行，使用使用注意这几个CSS样式和HTML标签配合使用才能达到多余文字内容出现省略号样式

ayangjing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML超出文本显示省略号...通过text-overflow实现
09-28
HTML中的“超出文本显示省略号”功能正是为此而设计的，它可以通过CSS的`text-overflow`属性来实现。`text-overflow`是一个非常实用的样式规则，它可以控制当元素内的文本溢出其边界时如何处理。在标题和描述中提到...
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
09-25
总的来说，利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性，我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示，提高网页的性能和用户体验。同时，对于多行...
php text 溢出,图文详解CSS文本溢出显示省略号效果（text-overflow）
weixin_36221149的博客
03-24 225
在工作中经常会遇到文本溢出，需要显示省略号的情况，那这个省略号是怎么实现的呢？这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号。对CSS文字溢出加省略号这个知识不熟悉的小伙伴可以参考一下，希望可以帮助到你！text-overflow属性表示当文本超出包含它的元素时，超出部分应该如何显示。写法：text-overflow ： clip | ellipsis属性值描述...
overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解
最新发布
u013179804的博客
04-21 1800
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。
CSS3：text-overflow实现文字截取，超出部分显示省略号
weixin_34331102的博客
01-08 212
1. 概述 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处， 一是不用通过后端程序截取； 二是有利于SEO。 2. text-overflow的属性 clip： 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。 如下图： p ellipsis： 当对象内文本溢出时显示省略标记（…），如下图：         string：使...
a标签超出用点省略+对齐
qq_24973007的博客
01-30 457
基础设置 display:inline-block; width:66vh; 超出指定宽度，用省略号表示 overflow: hidden; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; 解决省略后与其他元素不对齐 vertical-align: top; ...
text-overflow:ellipsis 不显示省略号问题
GodLoveMe的博客
07-05 742
的原因，讲该元素设置为display:block就可以解决问题了。设置单行文字长度多长以省略号显示。结果发现没有发生作用。
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先，对于基于WebKit的浏览器（如...
让a标签的内容超过一行或者多行以冒号省略显示
中森明菜的博客
10-11 2708
给a标签以下样式即可 多行如下 a{ overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:5(此处显示限制行数) } 一行如下 a{ display:block; white-space:nowrap...
a标签锚点和超出因此成省略号
u013018357的博客
03-04 884
<a href="#h1">跳到第一段</a> <a href="#h2">跳到第二段</a> <a href="#h3">跳到第三段</a> <h1 id="h1"> 我的第一段 </h1> <h1 id="h2"> 我的第二段 </h1> <h1 id="h3
多行文字text-overflow: ellipsis省略号失效问题
qq_51978639的博客
02-03 1273
设置了多行文字超出显示省略号的样式，省略号就是不生效，为此折腾了好久。 问题在于设置多行文字显示省略号时，只能指定显示的行数，不能设置高度
a标签超出以后隐藏并且显示省略点
weixin_30254435的博客
11-15 154
display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 两行超出隐藏 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-li...
菜鸟篇---- a标签中溢出文本显示省略号
qq_43687594的博客
12-17 2336
a标签中的文本溢出显示省略号
溢出文本显示省略号,关于text-overflow:ellipsis的那些事（转）
Bean
09-17 275
原帖：http://leeiio.me/text-overflow-ellipsis/Default.aspx?__tencentip=172.30.25.149&__tencentid=1&__tencentrawurl=http://leeiio.me/text-overflow-ellipsis/ [img]http://imgs.leeiio.me/blogimgs/2010/07/...
多行文本溢出显示省略号(…)全攻略
Amare丶的部落格
06-08 269
.class{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 更多详情请点击  http://blog.sina.com.cn/zhaojianjunzjj
css省略号
故里的博客
11-30 578
1.一行省略 .a-line{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 或者 .a-line{ overflow: hidden; text-overflow: ellipsis; display: box; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orien
a标签内容超出以后隐藏并且显示省略点
執筆冩回憶
10-17 2302
/*一行*/ a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*两行超出隐藏*/ a{ overflow: hidden; text-overflow: ellipsis; display: -webkit-...
css中text-overflow是什么意思
05-04
`text-overflow` 是 CSS 中的一个属性，用于控制当文本溢出容器时如何显示。通常在容器中设置了固定宽度或高度，而文本内容超过容器大小时，就会造成文本溢出。这时候可以使用 `text-overflow` 属性来指定文本溢出时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值