【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )

文章目录

  • 一、文字溢出问题
  • 二、文字溢出处理方案
  • 三、代码示例





一、文字溢出问题



在元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出的问题 ;

下面的示例中 , 在 150x25 像素的盒子中 , 显示 骐骥一跃,不能十步;驽马十驾,功在不舍; 一段话 , 明显盒子太小 , 默认的显示效果如下 :

【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )_第1张图片


文字溢出代码示例 :

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字溢出处理title>
	<style>
		div {
			width: 150px;
			height: 25px;
			border: 1px solid red;
		}
	style>
head>
<body>
	<div>
		骐骥一跃,不能十步;驽马十驾,功在不舍;
	div>
body>
html>

显示效果 :
【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )_第2张图片





二、文字溢出处理方案



文字溢出处理方案 :

  • 首先 , 强制文本在一行中显示 ;
	white-space: nowrap;
  • 然后 , 隐藏文本的超出部分 ;
	overflow: hidden;
  • 最后 , 使用省略号代替文本超出部分 ;
	text-overflow: ellipsis;

white-space 样式 用于设置 文本显示方式 :

  • 默认方式 : 显示多行 ;
	white-space: normal;
  • 显示一行 : 强行将盒子中的文本显示在一行中 ;
	white-space: nowrap;

text-overflow 样式 用于设置 文字溢出处理方案 :

  • 默认方式 - 简单裁切 : 不显示 ... 省略号 ;
	text-overflow : clip;
  • 显示省略号 : 文本溢出时 , 显示 ... 内容 ;
	text-overflow : ellipsis;




三、代码示例



代码示例 :

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字溢出处理title>
	<style>
		div {
			width: 150px;
			height: 25px;
			border: 1px solid red;
			
			/* 首先 强制文本在一行中显示 */
			white-space: nowrap;
			/* 然后 隐藏文本的超出部分 */
			overflow: hidden;
			/* 最后 使用省略号代替文本超出部分 */
			text-overflow: ellipsis;
		}
	style>
head>
<body>
	<div>
		骐骥一跃,不能十步;驽马十驾,功在不舍;
	div>
body>
html>

执行结果 :

【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )_第3张图片

你可能感兴趣的:(CSS,css,html,前端,文本溢出)