css控制超出一行内容显示省略号

最新推荐文章于 2024-08-06 19:00:26 发布

想搞全栈的前端

最新推荐文章于 2024-08-06 19:00:26 发布

阅读量3.1k

点赞数 1

分类专栏： HTML/CSS 文章标签：超出一行显示省略号 css text-overflow white-space overflow

本文链接：https://blog.csdn.net/qq_42068550/article/details/90510249

版权

HTML/CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

前言

在前端开发过程中，经常会遇到文字超过一行内容的情况，要求隐藏超出部分并且以省略号显示。
像这样：
在这里插入图片描述

实现方法

主要依赖下面三个属性实现

/* 规定段落中的文本不进行换行： */
white-space: nowrap;
/* 内容会被修剪，并且其余内容是不可见的。 */
overflow: hidden;
/* 显示省略符号来代表被修剪的文本。 */
text-overflow: ellipsis

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 500px;
            text-align: center;
        }
        div{
            /* 规定段落中的文本不进行换行： */
            white-space: nowrap;
            /* 内容会被修剪，并且其余内容是不可见的。 */
            overflow: hidden;
            /* 显示省略符号来代表被修剪的文本。 */
            text-overflow: ellipsis 
        }
    </style>
</head>
<body>
    <div>“世界很复杂，百度更懂你”，百度翻译拥有网页版和手机APP等多种产品形态，此外还针对开发者提供开放云接口服务，日均响应上亿次翻译请求。除文本翻译外，结合用户多样性的翻译需求，推出网页翻译、网络释义、海量例句、权威词典、离线翻译、语音翻译、对话翻译、实用口语、拍照翻译、AR翻译、趣味配音等功能，同时还针对对译文质量要求较高的用户，提供人工翻译服务，让用户畅享每一次翻译体验。</div>
</body>
</html>