css之文字超出处理

最新推荐文章于 2024-02-27 14:31:14 发布

qq_43101834

最新推荐文章于 2024-02-27 14:31:14 发布

阅读量1.3k

点赞数

分类专栏：实习学习 html和css

本文链接：https://blog.csdn.net/qq_43101834/article/details/113180178

版权

实习学习同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

html和css

14 篇文章 0 订阅

订阅专栏

知识介绍

word-break 属性规定自动换行的处理方法（例子没用）

：normal 使用浏览器默认的换行规则。
：break-all 允许在单词内换行。
：keep-all 只能在半角空格或连字符处换行。

text-overflow 属性规定当文本溢出包含元素时发生的事情。

：clip 修剪文本。
：ellipsis 显示省略符号来代表被修剪的文本。
：string 使用给定的字符串来代表被修剪的文本。

white-space属性指定元素内的空白怎样处理。

：normal 默认。空白会被浏览器忽略。
：pre 空白会被浏览器保留。
：nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
：pre-wrap 保留空白符序列，但是正常地进行换行。
：pre-line 合并空白符序列，但是保留换行符。
：inherit 规定应该从父元素继承 white-space 属性的值。

width：10em
这个10是指该class类下字数最多为10，超过10就以省略号显示注意字体大小不同占位大小问题

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
这三句控制行数， -webkit-line-clamp 是一个不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。

限制显示，超出字数显示省略号隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
	
	.box{
		width:300px;
		height:300px;
		background-color: pink;
		margin:10px auto;
	}
	.container1{
		background-color: #ED4040;
		margin:10px auto;
	}
	.c1_1{
		font-size: 13px;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		width:10em;
	}
	.c1_2{
		font-size: 10px;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		width:10em;
	}
	
	.c2_1{
		font-size: 13px;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		width:150px;
	}
	.c2_2{
		font-size: 10px;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		width:150px;
	}
	
	.c3_1{
		font-size: 13px;
	    width:150px;
	    overflow : hidden;
	    text-overflow: ellipsis;
	    white-space:wrap;
	
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
		
		width:150px;
	}
	.c3_2{
		font-size: 10px;
		width:150px;
		overflow : hidden;
		text-overflow: ellipsis;
		white-space:wrap;
		
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		
		width:150px;
	}
	</style>
	</head>
	<body>
		<div class="box">
			<p>在下面区域测试数据</p>
			<!-- 限制字数 -->
			<div class="container1">
				<div class="c1_1">啦啦啦啦啦啦啦啦啦啦啦啦</div>
				<div class="c1_2">啦啦啦啦啦啦啦啦啦啦啦啦</div>
			</div>
			<!-- 限制宽度 超过150px不显示 -->
			<div class="container1">
				<div class="c2_1">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
				<div class="c2_2">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
			</div>
			<!-- 限制宽度和行数-->
			<div class="container1">
				<div class="c3_1">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
				<div class="c3_2">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
			</div>
		</div>
	</body>
<script type="text/javascript">
</script>
</html>

在这里插入图片描述

扩展：
1.如果标签内的是英文，英文是不会自动换行的，所以需要让他自动换行添加如下代码即可

word-wrap:break-word; word-break:break-all;

2.Flex布局下如何使用text-overflow:ellipsis省略过长文本

3.更多css文字设置

qq_43101834

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之文字超出处理

知识介绍word-break 属性规定自动换行的处理方法（例子没用）：normal 使用浏览器默认的换行规则。：break-all 允许在单词内换行。：keep-all 只能在半角空格或连字符处换行。text-overflow 属性规定当文本溢出包含元素时发生的事情。：clip 修剪文本。：ellipsis 显示省略符号来代表被修剪的文本。：string 使用给定的字符串来代表被修剪的文本。white-space属性指定元素内的空白怎样处理。：normal 默认。空白会被浏览
复制链接

扫一扫