文本超出

最新推荐文章于 2023-04-11 19:11:53 发布

微雨即至

最新推荐文章于 2023-04-11 19:11:53 发布

阅读量152

点赞数

分类专栏： web学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_45665589/article/details/112695277

版权

web学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

单行文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css文本超出</title>
    <style>
        div {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /*设置水平垂直居中*/

            height: 10vh;
            width: 10vw;
            background-color: cyan;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            /* display: -webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
            overflow: hidden; */
        }
    </style>
</head>

<body>
    <div>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
</body>

</html>

测试结果如下所示：
在这里插入图片描述
这里会把文本的超出部分全部用…代替

多行文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css文本超出</title>
    <style>
        div {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /*设置水平垂直居中*/

            height: 10vh;
            width: 10vw;
            background-color: cyan;

            /* overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; */

            display: -webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
</body>

</html>

测试结果如下：
在这里插入图片描述
这里-webkit-line-clamp属性是用调整第几行显示省略号

介绍一下text-overflow

在这里插入图片描述
这个是w3school的介绍，引用一下里面的例子

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>

</head>

<body>

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。</p>

<p>这个 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip"：</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

测试结果为：
在这里插入图片描述
clip会把从超出部分开始剪掉，而ellipsis会把超出的部分变为省略号

微雨即至

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本超出

单行文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css文本超出</title> <style> div {
复制链接

扫一扫

专栏目录