关于文字的一些小技巧
- 单行省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 240px;
/* 不换行 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 超出部分以省略号形式显示 */
text-overflow: ellipsis;
}
</style>
<body>
<div class="container">ksdjakljgd'sak;ljdglasjgklsjdgkl;asjglks;jdgklasjgslddjgkasjga</div>
</body>
</html>
效果如下:
- 多行省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 240px;
/* 超出隐藏 */
overflow: hidden;
/* 弹性伸缩盒子 */
display: -webkit-box;
/* 子元素垂直排列 */
-webkit-box-orient: vertical;
/* 可以显示的行数(这里表示3行),超出部分用...表示 */
-webkit-line-clamp: 3;
}
</style>
<body>
<div class="container">中国纪检监察报讯(记者 左翰嫡)5月23日,国务院联防联控机制召开新闻发布会介绍,近期全国疫情整体呈现稳定下降态势。近一周以来,全国每天新增本土感染者已降至1200例以下,波及范围进一步缩小。上海疫情继续整体向好,但防反弹压力仍然较大;北京聚集性疫情和零星散发病例交织,局部地区和重点人群仍有感染传播风险。</div>
</body>
</html>
效果如下:
- 两端对齐
在上一例子中加上以下语句对比,右侧对齐了。
text-align: justify;
效果如下:
- 在长单词或 URL 地址内部进行换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 240px;
height: 200px;
background-color: aliceblue;
}
</style>
<body>
<div class="container">ksdjakljgdsak;ljdglasjgklsjdgkl;asjglks;jdgklasjgslddjgkasjga</div>
</body>
</html>
效果如下:
看到效果图会发现英文单词不换行,只有当输入的是英文的时候才会出现这种情况,因为一长串的英文字母会被默认为是一个单词,而汉字则不会有这个问题。那么可以添加word-wrap: break-word;
属性来换行。
得到如下:
- 允许在单词内换行(以字母作为换行依据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 240px;
height: 200px;
background-color: aliceblue;
}
</style>
<body>
<div class="container">Gold card price, you can see the cervical cancer of the card pulling machine. Oh, alga, press one for you</div>
</body>
</html>
效果如下:
看到效果图会发现英文换行很奇怪,那么可以加上属性word-break: break-all;
就能以字母作为换行依据,达到一个比较不错的效果。效果如下:
- 文字分段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 300px;
font-size: 14px;
/* 控制三列展示 */
column-count: 3;
/* 列与列之间间距 */
column-gap: 40px;
/* 列边框 */
column-rule: 1px solid red;
/* 列的宽度, 与column-count互斥 */
column-width: 50px;
}
</style>
<body>
<div class="container">中国纪检监察报讯(记者 左翰嫡)5月23日,国务院联防联控机制召开新闻发布会介绍,近期全国疫情整体呈现稳定下降态势。近一周以来,全国每天新增本土感染者已降至1200例以下,波及范围进一步缩小。上海疫情继续整体向好,但防反弹压力仍然较大;北京聚集性疫情和零星散发病例交织,局部地区和重点人群仍有感染传播风险。</div>
</body>
</html>