多个p标签一行展示,溢出隐藏

news2024/10/7 10:20:10

一开始,我是让div包裹多个p标签,并让div“flex”布局,且单行溢出隐藏,可是发现当父元素或当前元素有flex时,text-overflow: ellipsis;是不生效的
大多数解决办法都是,不要flex,或者给div下的每个p标签单独设置样式。
由于我现在写的功能,p标签是v-html解析出来的,无法得知具体有多少个p标签,因此都不适用
我想实现的功能是多个p标签一行展示,溢出div宽度时,隐藏余下内容…显示
效果图
在这里插入图片描述
在这里插入图片描述

html

<div class="hide">
	<p>111111</p>
    <p>222222</p>
    <p>333</p>
    <p>44444444444444</p>
</div>

css

.hide{
	width: 200px;
	height: 50px;
	line-height: 50px;
	border: 1px solid #ccc;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
p{
    display: contents;
}

亲测有用!

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

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

相关文章

计算机网络 期末复习(谢希仁版本)第6章

DNS采用UDP。 DHCP 给运行服务器软件、且位置固定的计算机指派一个永久地址&#xff0c;给运行客户端软件的计算机分配一个临时地址

数据库(25)——多表关系介绍

在项目开发中&#xff0c;进行数据库表结构设计时&#xff0c;会根据业务需求及业务模块之间的关系&#xff0c;分析并设计表结构&#xff0c;各个表之间的结构基本上分为三种&#xff1a;一对多&#xff0c;多对多&#xff0c;一对一。 一对多 例如&#xff0c;一个学校可以有…

Web IDE 在线编辑器综合实践(Web IDE 技术探索 三)

前言 前面两篇文章&#xff0c;我们简单讲述了 WebContainer/api 、Terminal 的基本使用&#xff0c;离完备的在线代码编辑器就差一个代码编辑了。今天通过 monaco editor &#xff0c;来实现初级代码编辑功能&#xff0c;讲述的是整个应用的搭建&#xff0c;并不单独针对monac…

鸿蒙轻内核M核源码分析系列六 任务及任务调度(2)任务模块

任务是操作系统一个重要的概念&#xff0c;是竞争系统资源的最小运行单元。任务可以使用或等待CPU、使用内存空间等系统资源&#xff0c;并独立于其它任务运行。鸿蒙轻内核的任务模块可以给用户提供多个任务&#xff0c;实现任务间的切换&#xff0c;帮助用户管理业务程序流程。…

设计模式-工厂方法(创建型)

创建型-工厂方法 简单工厂 将被创建的对象称为“产品”&#xff0c;将生产“产品”对象称为“工厂”&#xff1b;如果创建的产品不多&#xff0c;且不需要生产新的产品&#xff0c;那么只需要一个工厂就可以&#xff0c;这种模式叫做“简单工厂”&#xff0c;它不属于23中设计…

【PL理论】(5) F#:递归类型 | Immutability 特性(F#中值一旦定义就不会改变)

&#x1f4ad; 写在前面&#xff1a;本文旨在探讨不可变数据结构在 F# 编程中的应用&#xff0c;特别是如何利用递归记录类型来表示和操作数值表达式。通过定义存储整数的二叉树和数值表达式的类型&#xff0c;我们将展示不可变性如何简化程序的理解和维护。文章将对比 F# 与命…

LeetCode刷题之HOT100之搜索旋转排序数组

2024/6/2 雨一直下&#xff0c;一个上午都在床上趴着看完了《百年孤独》&#xff0c;撑伞去吃了个饭&#xff0c;又回到了宿舍。打开许久未开的老电脑&#xff0c;准备做题了。《百年孤独》讲了什么&#xff0c;想表达什么&#xff0c;想给读者留下什么&#xff0c;我不知道&am…

IP黑名单与IP白名单是什么?

在IP代理使用中&#xff0c;我们经常听到黑名单与白名单两个名词&#xff0c;它们不仅提供了强大的防御机制&#xff0c;还可以灵活应对不同的安全威胁。本文将详细探讨IP黑名单和白名单在网络安全中的双重屏障作用。 一、IP黑名单和白名单定义 IP黑名单与IP白名单是网络安全中…

2024会声会影全新旗舰版,下载体验!

在当今数字时代&#xff0c;视频内容已成为最受欢迎的媒介之一。无论是个人娱乐、教育还是商业推广&#xff0c;优秀的视频制作都是吸引观众的关键。为了满足广大用户对高质量视频制作软件的需求&#xff0c;我们隆重推出了会声会影2024最新旗舰版。这款软件不仅集成了最先进的…

六、SQL执行器的定义和实现

之前的Sql执行都是耦合在SqlSession里的&#xff0c;现在要对这部分进行解耦和重构&#xff0c;引申出执行器&#xff0c;查了相关概念&#xff0c;Executor执行器可以说是定义了一个个的SQL的执行流程&#xff0c;用查询方法举例&#xff0c;大概一下几步&#xff1a; 1.获取数…

基于SOA海鸥优化算法的三维曲面最高点搜索matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于SOA海鸥优化算法的三维曲面最高点搜索matlab仿真&#xff0c;输出收敛曲线以及三维曲面最高点搜索结果。 2.测试软件版本以及运行结果展示 MATLAB2022A版本…

OPPO 文件传输 - 将文件从 OPPO 手机传输到 PC 的 5 种方法

OPPO手机以其出色的拍照功能而闻名&#xff0c;尤其是新推出的OPPO Find X2系列&#xff0c;它配备了高清前置镜头和超夜景模式&#xff0c;让您轻松拍出精彩瞬间。当您需要将这些照片或其他文件从OPPO手机传输到PC时&#xff0c;以下是五种简便的方法。 第 1 部分&#xff…

掘金AI商战宝典-高阶班:如何用AI制作视频(11节视频课)

课程下载&#xff1a;掘金AI商战宝典-高阶班&#xff1a;如何用AI制作视频(11节视频课)-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程目录&#xff1a; 1-第一讲用AI自动做视频(上)_1.mp4 2-第二讲用AI自动做视频(中)_1.mp4 3-第四讲A…

你真的理解补码了吗?

下面来看三句话&#xff1a; &#xff08;1&#xff09;一个数的补码等于原码取反加1 &#xff08;2&#xff09;减去一个数等于加这个数的补码 &#xff08;3&#xff09;一个数的反码就是这个数原码的每一位都取反 学过补码的同学应该都听过类似的表述&#xff0c;如果你…

使用迁移助手 (SSMA for Oracle) 将Oracle19c数据库迁移到SQL Server2022

如何使用适用于 Oracle 的 SQL Server 迁移助手Microsoft SQL Server Migration Assistant for Oracle (SSMA for Oracle) 将 Oracle 数据库迁移到 SQL Server Microsoft SQL Server Migration Assistant (SSMA) for Oracle is a tool to automate migration from Oracle data…

python数据分析——模型诊断

参考资料&#xff1a;活用pandas库 创建模型是持续性活动。当向模型中添加或删除变量时&#xff0c;需要设法比较模型&#xff0c;并需要统一的方法衡量模型的性能。 1、残差 模型的残差指实际观测值与模型估计值之差。 # 导入pandas库 import pandas as pd # 读取数据集 hou…

学Python,看一篇就够

学Python&#xff0c;看一篇就够 python基础注释变量标识符命名规则使用变量认识bugDebug工具打断点 数据类型输出转义字符输入输入语法输入的特点 转换数据类型pycharm交互运算符的分类赋值运算符复合赋值运算符比较运算符逻辑运算符拓展 条件语句单分支语法多分支语法拓展 if…

JavaScript 学习笔记 总结

回顾&#xff1a; Web页面标准 页面结构&#xff1a;HTML4、HTML5页面外观和布局&#xff1a;CSS页面行为&#xff1a;JavaScript强调三者的分离前后端分离开发模式 响应式设计Bootstrap框架入门 Bootstrap总结 基础 下载和使用基础样式&#xff1a;文本样式、图片样式、表格…

模式识别涉及的常用算法

一、线性回归 1.算法执行流程&#xff1a; 算法的执行流程可以简述如下&#xff1a; 导入必要的库&#xff1a; 导入NumPy库&#xff0c;用于数值计算。导入Matplotlib库&#xff0c;用于数据可视化。导入Pandas库&#xff0c;用于数据处理&#xff08;尽管在这个例子中&#…

SpringBoot定时任务+Quartz 动态调度

1、分部解释 2、完整代码 3、SpringBoot定时任务Quartz 1、动态定时任务&#xff1a; 动态定时任务&#xff0c;即定时任务的动态调度&#xff0c;可根据需求自由的进行任务的生成、暂停、恢复、删除和更新操作。Quartz本身没有提供动态调度的功能,需要自己根据相关的API开发。…