CSS笔记-文字溢出省略号显示

最新推荐文章于 2024-06-09 17:43:42 发布

Green8y0

最新推荐文章于 2024-06-09 17:43:42 发布

阅读量107

点赞数

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

原文链接：https://blog.csdn.net/weixin_44659458/article/details/109286843

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

前言
一、代码
二、演示效果
总结

前言

CSS学习笔记-文字溢出div部分，使用省略号进行显示

一、代码

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文字溢出省略号显示</title>
  <style>
    .row {
      width: 100px;
      background-color: skyblue;
      /* 若文字一行显示不完,也强制一行显示 */
      white-space: nowrap;
      /* 溢出部分隐藏 */
      overflow: hidden;
      /* 溢出部分的文字,用省略号显示 */
      text-overflow: ellipsis;
    }
    .rows {
      width: 100px;
      background-color: lightgrey;
      /* 溢出部分隐藏 */
      overflow: hidden;
      /* 溢出部分的文字,用省略号显示 */
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素内显示的文本行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
<div class="row">
  单行文字溢出省略号显示
</div>
<div class="rows">
  多行文字溢出省略号显示
</div>
</body>
</html>

注：.rows的样式仅支持webkit内核的浏览器

二、演示效果

在这里插入图片描述

总结

使用CSS实现文字溢出部分，使用省略号显示

Green8y0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记-文字溢出省略号显示

文章目录前言一、代码二、演示效果总结前言CSS学习笔记-文字溢出div部分，使用省略号进行显示一、代码HTML代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字溢出省略号显示</title> <style> .row { width: 100px; backgrou
复制链接

扫一扫