在元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出的问题 ;
下面的示例中 , 在 150x25 像素的盒子中 , 显示 骐骥一跃,不能十步;驽马十驾,功在不舍;
一段话 , 明显盒子太小 , 默认的显示效果如下 :
文字溢出代码示例 :
<!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>
显示效果 :
文字溢出处理方案 :
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>
执行结果 :