学习css文本溢出显示省略号？

最新推荐文章于 2024-02-23 16:15:58 发布

卖菜的小白

最新推荐文章于 2024-02-23 16:15:58 发布

阅读量1.7k

点赞数 2

分类专栏： CSS面试文章标签： css

本文链接：https://blog.csdn.net/weixin_47450807/article/details/124387721

版权

CSS面试专栏收录该内容

41 篇文章 9 订阅

订阅专栏

一、写在前面
今天携程面试，问题是这样的有一个span标签，其宽度为100px,我们需要给其设置文本，并且让其单行显示，超出部分使用省略号表示，当我们鼠标悬停在说上面的时候，然后再进行展示全部文本。但是我不会，很尴尬。下面重新整理一下。

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

<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>
  <style>
    #text {
      display: inline-block;
      width: 100px;
      border: 1px solid #000;
      /* 设置文本不进行换行 */
      white-space: nowrap;
      /* 让超出部分省略 */
      overflow: hidden;
      /* 超出部分使用省略号 */
      text-overflow: ellipsis;
    }

    #text:hover {
      white-space: normal;
      text-overflow: clip;
    }
  </style>
</head>

<body>

  <span id="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>

</body>

</html>

在这里插入图片描述

1、使用white-space属性设置不换行，overflow属性隐藏超出部分，text-overflow属性添加省略号。需注意必须有固定宽度才会出现效果。

二、扩展
多行文本显示省略号

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

<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>
  <style>
    #text {
      display: -webkit-box;
      width: 100px;
      border: 1px solid #000;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  </style>
</head>

<body>

  <span id="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>

</body>

</html>

在这里插入图片描述

卖菜的小白

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习css文本溢出显示省略号？

一、写在前面今天携程面试，问题是这样的有一个span标签，其宽度为100px,我们需要给其设置文本，并且让其单行显示，超出部分使用省略号表示，当我们鼠标悬停在说上面的时候，然后再进行展示全部文本。但是我不会，很尴尬。下面重新整理一下。<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
复制链接

扫一扫