css3基础知识点--单行及多行文字溢出

最新推荐文章于 2022-01-15 20:59:13 发布

翻滚吧阿俊~~

最新推荐文章于 2022-01-15 20:59:13 发布

阅读量270

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40283570/article/details/94174036

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

单行文字溢出显示省略号

这种表现在移动端的标题显示经常会用到，多余文字不换行且以点点展示，下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.test{
			width: 100px;
			height: 20px;
			border: 1px solid #666;
			white-space:nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<div class="test">
		如果某个单词太长，不适合在一个区域内，它扩展到外面：
	</div>
	
</body>
</html>

white-space空格处理

white-space属性表

white-space属性	源码空格	源码换行	<br>换行	容器边界换行
normal	合并	忽略	换行	换行
nowrap	合并	忽略	换行	不换行
pre	保留	换行	换行	不换行
pre-wrap	保留	换行	换行	换行
pre-line	合并	换行	换行	换行

https://blog.csdn.net/qq_33706382/article/details/78328188

3个属性组合使用。

white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;

核心css语句：

1、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

2、white-space: nowrap; （设置文字在一行显示不能换行）

3、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

2.多行文字溢出显示省略号

我们在编写网页代码时，有时候新闻列表页中新闻简介可能有一行或者多行，我们要如何处理这种问题，让其超出多行后还能显示省略号呢，不要慌，我们css还是很强大的，已经给我们提供了方法来处理这种问题了。

核心css语句：

1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。为了实现该效果，它需要组合其他的WebKit属性）

2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示）

3、-webkit-box-orient:vertical;（和1结合使用，设置或检索伸缩盒对象的子元素的排列方式。）

4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

翻滚吧阿俊~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3基础知识点--单行及多行文字溢出

单行文字溢出显示省略号这种表现在移动端的标题显示经常会用到，多余文字不换行且以点点展示，下面的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="te...
复制链接

扫一扫