CSS文本超出显示小数点

目录

1、单行文本溢出

2、多行文本溢出

1、基于高度截断

 2、基于行数截断  


1、单行文本溢出

如果解决文本溢出显示省略号,需要满足的三个条件:

  1. 先强制一行内显示文本

    white-space:nowrap;/*默认normal 自动换行*/
  2. 超出的文本隐藏起来。

     overflow:hidden;
  3. 文本省略部分替代超出的部分

     text-overflow:ellipsis; /*默认是clip 超出部分直接切除*/

2、多行文本溢出

1、基于高度截断

        对于多行文本的溢出显示省略号,可以使用display属性配合-webkit-line-clamp-webkit-box-orient来实现。

步骤如下:

  1. 首先,将需要显示省略号的元素设置为块级元素,并且固定高度。

  2. 接着,使用-webkit-box-orient属性将元素内部的子元素按照垂直方向排列。

  3. 然后,使用-webkit-line-clamp属性限制元素内部的文本行数。

  4. 最后,使用text-overflow属性将超出元素高度的文本内容显示为省略号

    代码展示

 .ellipsis {/*将元素内部的子元素按照垂直方向排列*/display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;height: 60px;/*设置盒子高度*/max-height: 60px; /* 或者根据需要设置最大高度 */-webkit-line-clamp: 3;限制元素内部的文本行数。text-overflow: ellipsis;将超出元素高度的文本内容显示为省略号}
 2、基于行数截断  

        步骤

  • -webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)

  • display: -webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示

  • -webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式

  • overflow: hidden:文本溢出限定的宽度就隐藏内容

  • text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本

        代码展示 

<style> 
p {width: 400px;border-radius: 1px solid red;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
}
</style>
<p>这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p > 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/96975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

clickonce 发布的winform 如何CA认证?

要为使用ClickOnce发布的WinForms应用程序启用CA&#xff08;证书颁发机构&#xff09;认证&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. **获取数字证书**&#xff1a; - 首先&#xff0c;您需要获得一个数字证书&#xff0c;通常从受信任的CA购买。这个数字证…

unity脚本_生命周期函数 c#

帧&#xff1a;fps 即每秒钟跑的游戏帧数 游戏的本质 是一个死循环 每一次循环处理游戏逻辑就会更新一次画面 之所以能看到画面在动 是因为切换画面的速度达到一定时人眼就认为画面时流畅的 一帧就是执行一次循环 人眼舒适放松时可视帧数 24帧/s 游戏卡顿的原因&#xff1a; …

【将文本编码为图像灰度级别】以 ASCII 编码并与灰度级别位混合将文本字符串隐藏到图像像素的最低位中,使其不明显研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

土木硕设计院在职转码上岸

一、个人介绍 双非土木硕&#xff0c;98年&#xff0c;目前在北京&#xff0c;职位为前端开发工程师&#xff0c;设计院在职期间自学转码上岸&#x1f33f; 二、背景 本人于19年开始土木研究生生涯&#xff0c;研二期间去地产实习近半年(碧桂园和世茂&#xff0c;这两家的地产…

跨考408的C语言需要什么水平?

跨考408的C语言需要什么水平? 其实C语言了解一下就可以了&#xff0c;复习之前可以在b站上面随便找个视频看一下&#xff0c;指针部分重点学习一下就 行&#xff0c;C语言主要是数据结构代码部分的基础&#xff0c;对于跨考生来说&#xff0c;先看一下C语言对数据结构的复习有…

MySQL面试题合集

MySQL面经知识整理 文章目录 MySQL面经知识整理一、查询相关1.什么是MySQL的连接查询&#xff0c;左连接&#xff0c;右连接&#xff0c;内外连接2.SQL慢查询优化的方法3.大表查询如何优化 二、索引相关1.在MySQL中,可以通过哪些命令来查看查询是否使用了索引2.MySQL的最左匹配…

跨域请求方案整理实践

项目场景&#xff1a; 调用接口进行手机验证提示,项目需要调用其它域名的接口,导致前端提示跨域问题 问题描述 前端调用其他域名接口时报错提示: index.html#/StatisticalAnalysisOfVacancy:1 Access to XMLHttpRequest at http://xxxxx/CustomerService/template/examineMes…

#力扣:13. 罗马数字转整数@FDDLC

13. 罗马数字转整数 一、Java import java.util.HashMap;class Solution {public int romanToInt(String s) {HashMap<Character, Integer> m new HashMap<>() {{put(I, 1);put(V, 5);put(X, 10);put(L, 50);put(C, 100);put(D, 500);put(M, 1000);}};char[] a …

背包问题学习笔记-分组背包

题意描述&#xff1a; 有 N 组物品和一个容量是 V 的背包。每组物品有若干个&#xff0c;同一组内的物品最多只能选一个。每件物品的体积是 vij&#xff0c;价值是 wij&#xff0c;其中 i 是组号&#xff0c;j 是组内编号。求解将哪些物品装入背包&#xff0c;可使物品总体积不…

UniApp创建项目HelloWorld

浏览器预览效果镇楼 普通项目创建 点击创建完成后&#xff0c;就如下所示 确实和微信小程序开发差不多。只是稍微换了一个名字的概念了&#xff0c;这个就是开发嘛&#xff0c;不要过于纠结概念性东西。开发开发&#xff0c;开了就知道怎么发了&#xff1f; 或许是 反正write就…

基于虚拟阻抗的下垂控制——孤岛双机并联Simulink仿真

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Python3操作文件系列(二):文件数据读写|二进制数据读写

Python3操作文件系列(一):判断文件|目录是否存在三种方式 Python3操作文件系列(二):文件数据读写|二进制数据读写 Python3数据文件读取与写入 一: 文件数据|二进制数据读写 import os"""Python3的open(file,mode"文件的操作模式")利用该函数可以对…

基于腾讯云的OTA远程升级

一、OTA OTA即over the air,是一种远程固件升级技术&#xff0c;它允许在设备已经部署在现场运行时通过网络远程更新其固件或软件。OTA技术有许多优点&#xff0c;比如我们手机系统有个地方做了优化&#xff0c;使用OTA技术我们就不用召回每部手机&#xff0c;直接通过云端就可…

Git 学习笔记 | 版本控制和版本控制工具

Git 学习笔记 | 版本控制和版本控制工具 Git 学习笔记 | 版本控制和版本控制工具什么是版本控制&#xff1f;版本管理工具的特性版本管理工具的发展简史主流的版本控制器本地版本控制集中版本控制分布式版本控制 Git与SVN的主要区别 Git 学习笔记 | 版本控制和版本控制工具 学…

HttpClient实现爬虫开发

网络爬虫是一种高效获取网络信息的方式&#xff0c;而HttpClient是一个强大而灵活的Java库&#xff0c;提供了方便的API和丰富的功能&#xff0c;使其成为开发高效且灵活的网络爬虫的理想选择。本文将分享如何利用HttpClient库进行网络爬虫开发&#xff0c;帮助您更好地理解并实…

【计算机网络】因特网中的电子邮件

文章目录 简单邮件传送协议SMTP邮件访问协议POP3IMAPHTTP 参考资料 电子邮件为异步通信媒介 因特网电子邮件系统 电子邮件系统的三个构件&#xff1a;用户代理、邮件服务器、邮件发送和读取协议 用户代理 User Agent 即UA 电子邮件客户端软件&#xff0c;用户与电子邮件系统的接…

林沛满-TCP之在途字节数

本文整理自&#xff1a;《Wireshark网络分析的艺术 第1版》 作者&#xff1a;林沛满 著 出版时间&#xff1a;2016-02 我一直谨记斯蒂芬霍金的金玉良言—每写一道数学公式就会失去一半读者。不过为了深度分析网络包&#xff0c;有时候是不得不计算的&#xff0c;好在小学一年级…

图形学中一些基本知识的总结与复习

前言 在过完games101课程后仍然觉得自己还有许多地方不懂与遗漏&#xff0c;以此来补充与复习一些其中的知识。 参考&#xff1a;Games101、《Unity Shader 入门精要》 GPU渲染流水线(GPU Rendering Pipeline) ----注&#xff1a;Games101课程中所展示渲染流程与书中有所不同&…

变压器绕组断股往往导致直流电阻不平衡率超标

变压器绕组断股往往导致直流电阻不平衡率超标&#xff0c; 例如&#xff0c; 某电厂 SFPSL—12000/220 型主变压器&#xff0c; 色谱分析结果发现总烃含量急剧增长&#xff0c; 测直流电阻&#xff0c; 其结果是高、 低压侧与制造厂及历年的数值相比较无异常&#xff0c; 但中压…

javaWeb网上购物系统的设计与实现

摘 要 随着计算机网络技术的飞速发展和人们生活节奏的不断加快&#xff0c;电子商务技术已经逐渐融入了人们的日常生活当中&#xff0c;网上商城作为电子商务最普遍的一种形式&#xff0c;已被大众逐渐接受。因此开发一个网上商城系统&#xff0c;适合当今形势&#xff0c;更加…