css之文字超出处理

知识介绍

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属性。

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


<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>
			
			<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>

css之文字超出处理_第1张图片

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

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

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

3.更多css文字设置

你可能感兴趣的:(实习学习,html和css)