CSS中 设置( 单行、多行 )超出显示省略号_css超出显示...-程序员宅基地

技术标签： css  HTML CSS UI  前端  

1. 设置超出显示省略号

css设置超出显示省略号可分两种情况：

  • 单行文本溢出显示省略号…
  • 多行文本溢出显示省略号…

但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。

  • overflow：hidden; 不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
  • text-overflow：ellipsis; 当文本对象溢出是显示…，当然也可是设置属性为 clip 不显示点点点；
单行文本溢出显示省略号
<div class="wrap">
  <div class="content">测试数据：css单行文本超出长度显示省略号--明天也要努力</div>
  <div class="content text-ellipsis">测试数据：css单行文本超出长度显示省略号--明天也要努力</div>
</div>

<style>
.wrap{
      
  width: 200px;
  height: 200px;
}
.content{
      
  width: 100%;
  margin-top: 6px;
}
.text-ellipsis{
      
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
</style>

在这里插入图片描述

多行文本溢出显示省略号

思路：
1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数；
3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本

<div class="wrap">
  <div class="content">
    测试数据：css多行文本超出长度显示省略号，多行文本超出长度显示省略号--明天也要努力
  </div>
  <hr>
  <div class="content text-ellipsis">
    测试数据：css多行文本超出长度显示省略号，多行文本超出长度显示省略号--明天也要努力
  </div>
</div>

<style>
.wrap{
      
  width: 200px;
  height: 300px;
}
.content{
      
  width: 100%;
}
.text-ellipsis{
      
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>

在这里插入图片描述

说明： 移动端浏览器绝大部分是 WebKit 内核的，所以该方法适用于移动端；

  • -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；
  • display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ；
  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ；

2. 关于 -webkit-line-clamp 属性拓展

-webkit-line-clamp 可以把块容器中的内容限制为指定的行数，它只有在 display 属性设置成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical 时才有效果。
在大部分情况下，也需要设置 overflow 属性为 hidden, 否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号 (ellipsis )。
当他应用于锚 (anchor) 元素时，截取动作可以发生在文本中间，而不必在末尾。
备注： 此属性在 WebKit 中已经实现，但有一些问题。他是旧标准的一种支持。CSS Overflow Module Level 3 规范还定义了一个 line-clamp 属性，用来代替此属性且避免一些问题。

语法：

/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;

none：这个值表明内容显示不会被限制。
integer：这个值表明内容显示了多少行之后会被限制。必须大于 0.
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYS10000/article/details/127607497

智能推荐

腾讯地图小程序服务器配置,腾讯地图实现微信小程序地图定位教程-程序员宅基地

文章浏览阅读1.4k次。前言目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品，本篇博客主要针对地图选点功能进行实现。开通腾讯位置服务2、登录进入小程序后台，选择 “开发 - 开发工具 - 腾讯位置服务”image.png3、点击 “开通”，进入授权扫码界面image.png4、使用微信扫码进行授权image.png5、绑定开发者账号image.png接入插件1、在小程序后台，选择 “设置 - 第..._微信小程序地图搜索周边腾讯怎么设置

Python爬虫之入门保姆级教程，学不会我去你家刷厕所_python爬虫教程-程序员宅基地

文章浏览阅读7.4w次，点赞477次，收藏3.3k次。注重版权，转载请注明原作者和原文链接作者：Bald programmer今天这个教程采用最简单的爬虫方法，适合小白新手入门，代码不复杂爬虫的介绍以及原理等等七七八八的东西我就不多bb了，咋们直接上教程本案例我就以 彼岸图网 这个网站做教程，原网址下方链接https://pic.netbian.com/首先打开咋们的网站可以看到有很多好看的图片，一页总共21张图片我们右键选择检查或者直接按F12来到控制台点击左上角的箭头或者快捷键ctrl+shift+c，然后随便点在一张图片上面.._python爬虫教程

c语言课设报告时钟vc环境,C语言模拟时钟转动课设报告-附代码（17页）-原创力文档...-程序员宅基地

文章浏览阅读210次。模拟时针转动程序姓名：学号：完成日期：2012年12月设计目的加深对讲授内容的理解，尤其是一些语法规定。通过课程设计，自然地、熟练地掌握。熟悉所用的计算机系统的操作方法，也就是熟悉语言程序开发的环境。学会上机调试程序。熟悉C语言图形模式下的编程，掌握利用C语言相关函数开发电子时钟的基本原理。能模拟机械钟表行走；要准确地利用数字显示时间；在屏幕上显示一个活动时钟；程序界面设计合理，色彩得体大方，显示..._vc++时钟课程设计

移动终端软件测试基础知识-程序员宅基地

文章浏览阅读1.2k次。1）定制终端评测趋势　　● 定制终端评测　　　　→ 硬件：射频一致性、协议一致性、无线资源管理、硬件元器件、WLAN是当前硬件测试主要内容　　　　→ 软件：操作系统测试、浏览器测试、移动应用测试、Widget测试当软件测试重点，内容逐渐由功能向非功能演进　　● 预装在定制终端的移动应用评测　　　　→ 功能、性能、稳定性、兼容性　　　　→ 用户..._从衡量互联网软件质量的角度看,移动终端软件测试的质量要求主要有以 下哪几点?

navicat连接oracle设置,navicat for oracle连接oracle详解-程序员宅基地

文章浏览阅读815次。oracle服务器版本：oracle10g_database_32_win7oracle11g_database_64_win7oracle客户端版本：navicat_for_oracle_10.exenavicat111_oracle_cs_64.exe或者plsqldeveloper10_x32plsqldeveloper11_x64备注：oracle客户端安装版本必须与oracle服务器安装..._oracle 用 navicat 设置 autocommit 属性

朴素贝叶斯算法检测DGA-程序员宅基地

文章浏览阅读934次。僵尸网络&恶意软等程序，随着检测手段的更新(在早期，僵尸主机通产采用轮询的方法访问硬编码的C&C域名或IP来访问服务器获取域名，但是这种方式在安全人员进行逆向之后会得到有效的屏蔽)，黑客们也升级了肉鸡的C&C手段；用DGA算法在终端生成大量备选域名，而攻击者与恶意软件运行同一套DGA算法，生成相同的备选域名列表。当需要发动攻击的时候，选择其中少量进行注册，便可以建立通信，并且可以对注册的域名应用速变IP技术，快速变换IP，从而域名和IP都可以进行快速变化。目前，黑客攻击者为了防止恶

随便推点

133克隆图（递归深度优先搜索+哈希表）_深度优先递归 hash.map-程序员宅基地

文章浏览阅读204次。1、题目描述给你无向连通图中一个节点的引用，请你返回该图的深拷贝（克隆）。图中的每个节点都包含它的值 val（int） 和其邻居的列表（list[Node]）。class Node { public int val; public List<Node> neighbors;}2、示例简单起见，每个节点的值都和它的索引相同。例如，第一个节点值为 1（val = 1），第二个节点值为 2（val = 2），以此类推。该图在测试用例中使用邻接列表表示。邻..._深度优先递归 hash.map

HDU/5499/模拟-程序员宅基地

文章浏览阅读37次。题目链接 模拟题，直接看代码。 £：分数的计算方法，要用double;#include <set>#include <map>#include <cmath>#include <queue>#include <cstdio>#include <cstring>...

SQL SERVER 2005 MSSQLSERVER 服务不能启动_sql server2005 mssqlserver 停止-程序员宅基地

文章浏览阅读217次。SQL SERVER 2005 MSSQLSERVER 服务不能启动_sql server2005 mssqlserver 停止

【计算机视觉、关键点检测、特征提取和匹配】基于SIFT、PCA-SIFT和GLOH算法在不同图像之间建立特征对应关系，并实现点匹配算法和图像匹配（Matlab代码实现）-程序员宅基地

文章浏览阅读895次，点赞22次，收藏25次。在本次任务中，我们尝试构建一个系统，能够检测图像中的关键点，从中提取不变的特征，并最终进行如上所述的特征匹配。然后，在找到图像中的关键点后，我们试图从这些关键点中提取出有区分性的特征。在这个任务中，我们尝试实现和评估一些算法，如HARRIS、MSER、SIFT、PCA-SIFT、GLOH，然后我们在symfeat数据集中测试我们的算法，该数据集包含展示了光照、年龄和渲染风格等各种戏剧性变化的图像对。在标准的CBIR系统中，从单个图像中自动检测出兴趣点，然后在这些兴趣点处计算特征向量。行百里者，半于九十。

Revit坐标系概念深入理解及应用：内部点、原点、项目基点、测量点、共享坐标系、地理坐标及之间关系和衍生概念操作（详细）_revit设置坐标原点-程序员宅基地

文章浏览阅读5.6k次，点赞10次，收藏22次。1. 概述 Revit 提供了多种方法来定义模型的关联环境。包括内部点、原点、项目基点、测量点、共享坐标系、地理坐标以及与定位概念相关的的距离限制、多模型协作、项目北、正北等概念；这些概念多而复杂，相互之间又有关联性，常常让人不知所措，继而横眉冷指，更甚者口吐着夹杂Revit的芬芳...而如果恰好是工作上遇到这方面问题了，那么简直是一种外外表到灵魂的拷问和云深不知处的茫然。 当然，Revit设置这样“复杂”而灵活的坐标系概念是有其特定历史意义的，满足于各种应用场景，不限于..._revit设置坐标原点

关于Ubuntu开机蓝屏的问题解决方案_ubuntu蓝屏-程序员宅基地

文章浏览阅读2.6k次。当开机时，电脑出现蓝屏，无法进入系统按Ctrl + Alt + F1进入终端字符界面，输入用户名及密码然后按照以下步骤sudo dpkg --configure -asudo apt-get install xserver-xorg-lts-utopic # 输入密码sudo dpkg-reconfigure xserver-xorg-lts-utopic reboot..._ubuntu蓝屏

推荐文章

热门文章

相关标签