关于文字的一些小技巧

V。on

已于 2022-08-09 10:11:57 修改

阅读量123

点赞数

分类专栏： css 文章标签： html css

于 2022-05-24 11:17:35 首次发布

本文链接：https://blog.csdn.net/qq_40864647/article/details/124943476

版权

css 专栏收录该内容

32 篇文章 6 订阅

订阅专栏

关于文字的一些小技巧

单行省略号

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

在这里插入图片描述

V。on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于文字的一些小技巧

关于文字的一些小技巧单行省略号<!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">
复制链接

扫一扫

专栏目录