CSS实现文本溢出省略号或完整显示
目录
- 前言
- 1. 省略号
- 2. 完整展示
- 3. Demo
前言
文本内容超出容器宽度的问题,为了保持页面布局的整洁,通常会使用省略号来隐藏多余的内容
一共有两种方式:
- 设定省略号
- 完整展示
1. 省略号
文本溢出时显示省略号
.item-value {flex-basis: 70%; /* 设置宽度为父元素的70% */white-space: nowrap; /* 禁止文本换行,强制单行显示 */overflow: hidden; /* 隐藏超出容器的内容 */text-overflow: ellipsis; /* 超出部分使用省略号表示 */cursor: pointer; /* 鼠标悬停时显示指针,表示可点击 */
}
在某些场景下,用户可能需要查看被省略的完整文本
通过CSS中的伪类和事件状态,可以实现类似长按或点击查看完整内容的效果
.item-value:active {white-space: normal; /* 允许多行显示 */overflow: visible; /* 显示完整内容,不再隐藏 */text-overflow: initial; /* 去除省略号 */
}
2. 完整展示
.item-value {flex-basis: 70%; /* 值占用70%宽度 */white-space: nowrap; /* 防止换行 */overflow: visible; /* 允许内容溢出时显示滚动条 */white-space: normal; /* 允许内容正常换行 */text-overflow: clip; /* 不显示省略号 */cursor: pointer; /* 鼠标悬停时显示指针,表示可以点击查看 */
}
3. Demo
整体Demo配合如下:
<template><view><!-- 搜索栏和新增风险按钮 --><view class="search-class bg-white"><view class="search-button bg-white" style="display: flex; justify-content: space-around;"><button v-if="checkPermission('ship:risk:create')" class="bg-green" style="width: 40%;" @click="dataInfo()">新增风险</button></view></view><!-- 数据内容卡片列表 --><view class="data-content"><uni-card class="card" v-for="item in dataList" :key="item.id" :extra="item.shipCod"><!-- 船舶信息列表 --><uni-list><!-- 船舶位置 --><view class="list-item-container"><text class="item-title">位置:</text><text class="item-value">{{ item.vesselPosition }}</text></view><!-- 船舶描述,文本溢出显示省略号 --><view class="list-item-container"><text class="item-title">描述:</text><text class="item-value">{{ item.vesselDescribe }}</text></view><!-- 图片展示,点击预览 --><view class="list-item-container"><text class="item-title">图片:</text><view class="item-value"><image :src="item.vesselPicture" mode="widthFix" class="vessel-image" @click="previewImage(item.vesselPicture)"></image></view></view></uni-list></uni-card></view></view>
</template><script>
export default {data() {return {dataList: [{ id: 1, vesselPosition: '广州港', vesselDescribe: '这是一个非常长的描述,测试文本溢出显示效果。', vesselPicture: 'https://via.placeholder.com/150', shipCod: 'COD001' },{ id: 2, vesselPosition: '深圳港', vesselDescribe: '描述二', vesselPicture: 'https://via.placeholder.com/150', shipCod: 'COD002' },// 更多数据项...]};},methods: {checkPermission(permission) {// 权限检查逻辑,返回true或falsereturn true; // 示例中暂时返回true},dataInfo() {// 新增风险的逻辑console.log('新增风险');},previewImage(imageUrl) {// 图片预览逻辑console.log('预览图片:', imageUrl);}}
};
</script><style scoped>
.data-content {padding: 20px;
}.card {margin-bottom: 20px;
}.list-item-container {display: flex;margin-bottom: 10px;
}.item-title {font-weight: bold;flex-basis: 30%;
}.item-value {flex-basis: 70%; /* 值占用70%宽度 */white-space: nowrap; /* 防止换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 超出部分显示省略号 */cursor: pointer; /* 鼠标悬停时显示指针,表示可以点击查看 */
}/* 长按显示完整内容 */
.item-value:active {white-space: normal; /* 长按时允许多行显示 */overflow: visible; /* 展示完整内容 */text-overflow: initial; /* 去掉省略号 */
}.vessel-image {width: 100px;height: auto;
}
</style>
相关文章:
CSS实现文本溢出省略号或完整显示
目录 前言1. 省略号2. 完整展示3. Demo 前言 文本内容超出容器宽度的问题,为了保持页面布局的整洁,通常会使用省略号来隐藏多余的内容 一共有两种方式: 设定省略号完整展示 1. 省略号 文本溢出时显示省略号 .item-value {flex-basis: 7…...
three.js PropertyBinding和PropertyMixer
PropertyBinding 对场景图中某一真实属性的引用,内部使用。 构造器 PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (可选) 属性 # .path : Number # .parsedPath : Number # .node : Number # .rootNode …...
ssh远程连接try1账号切换tips
1,创建拥有sudo权限的用户: 在root下 sudo adduser bio sudo vim /etc/sudoers //修改添加如下: bio ALL(ALL) ALL //bio用户就拥有了root权限参考:https://github.com/isLishude/blog/issues/70 2,修改ssh配置 …...
C++之第十二课
课程列表 哎呀呀,失踪人口回归了!(前段时间跑去B站了,久等了) 今天来讲——数组 有一道题是这样的: 有n个数,请输出其中最大的数。 原来我们就要: int a,b,c... 但是——数组…...
Linux硬连接、软连接和复制的区别
硬连接、软连接和复制在Linux系统中的主要区别体现在以下三点: 文件链接的方式文件独立性文件系统的操作上。 一、硬连接 1. 硬连接是通过ln命令创建的,它为文件创建别名,与源文件共享同一inode号码,因此硬连接和源文件实际…...
基于STM32的无人小车自主避障系统设计
文章目录 前言资料获取设计介绍功能介绍设计程序具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设…...
杂牌鼠标侧键设置
X-Mouse Button Control修改侧键基本功能介绍-CSDN博客 下载链接 【X-Mouse汉化版】X-Mouse中文版 v2.19.2 绿色版(支持Win10)-开心电玩 (kxdw.com)...
Android WebView H5 Hybrid 混和开发
对于故乡,我忽然有了新的理解:人的故乡,并不止于一块特定的土地,而是一种辽阔无比的心情,不受空间和时间的限制;这心情一经唤起,就是你已经回到了故乡。——《记忆与印象》 前言 移动互联网发展…...
智源推出下一代检索增强大模型框架MemoRAG
北京智源人工智能研究院与中国人民大学高瓴人工智能学院联合发布了一款创新的人工智能模型框架——MemoRAG。该框架基于长期记忆,旨在推动检索增强生成(RAG)技术的发展,使其能够处理更复杂的任务,而不仅限于简单的问答…...
【AprilTag】视觉定位实战 | 使用 ROS 驱动的 USB 摄像头进行相机标定与 AprilTag 识别
写在前面: 🌟 欢迎光临 清流君 的博客小天地,这里是我分享技术与心得的温馨角落。📝 个人主页:清流君_CSDN博客,期待与您一同探索 移动机器人 领域的无限可能。 🔍 本文系 清流君 原创之作&…...
[数据集][目标检测]俯拍航拍森林火灾检测数据集VOC+YOLO格式6116张2类别
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):6116 标注数量(xml文件个数):6116 标注数量(txt文件个数):6116 标注…...
windows10下tomcat安装及配置教程
Apache Tomcat是一个开源的、轻量级的Servlet容器,广泛用于运行Java Web应用程序。以下是Tomcat安装及配置的基本步骤,根据搜索结果整理: 一、安装前的准备工作 确保你的计算机上已经安装了Java Development Kit (JDK),因为Tomc…...
Spring MVC设置请求头和响应头的Header
在Spring MVC中,动态设置请求头和响应头的方法有多种,以下是一些常见的方式: 设置请求头 使用RequestHeader注解 这个注解用于读取请求中的单个HTTP头部值,并将其作为一个参数传递给控制器方法。 RequestMapping("/examp…...
一个基于 laravel 和 amis 开发的后台框架, 友好的组件使用体验,可轻松实现复杂页面(附源码)
前言 随着互联网应用的发展,后台管理系统的复杂度不断增加,对于开发者而言,既要系统的功能完备,又要追求开发效率的提升。然而,传统的开发方式往往会导致大量的重复劳动,尤其是在构建复杂的管理页面时。有…...
HTML讲解(二)head部分
目录 1. 2.的使用 2.1 charset 2.2 name 2.2.1 describe关键字 2.2.2 keywords关键字 2.2.3 author关键字 2.2.4 http-equiv 小心!VS2022不可直接接触,否则!没这个必要,方源面色淡然一把抓住!顷刻炼化&#x…...
Linux(Ubuntu)(终端实现helloworld输出)
一、终端实现gcc编译 1.写好helloworld.h,helloworld.c,main.c后,打开终端,切换到保存这些文件的文件夹的目录,我把这些文件存放在helloworld的文件夹下,所以输入cd ~/helloworld 2.查看该目录下的文件&a…...
开源模型应用落地-qwen模型小试-调用Qwen2-VL-7B-Instruct-更清晰地看世界-集成vLLM(二)
一、前言 学习Qwen2-VL ,为我们打开了一扇通往先进人工智能技术的大门。让我们能够深入了解当今最前沿的视觉语言模型的工作原理和强大能力。这不仅拓宽了我们的知识视野,更让我们站在科技发展的潮头,紧跟时代的步伐。 Qwen2-VL 具有卓越的图像和视频理解能力,以及多语言支…...
【乐企-工具篇】有关乐企发票文件生成- OFD和PDF文件生成
有关乐企发票文件生成- OFD和PDF文件生成 本文主要是实现发票的OFD文件以及PDF文件的生成可以参考具体实现思路,具体情况需要根据自己业务进行改造! 具体的OFD文件模板可以从税局进行下载,下载之后放到resources资源目录下。 代码 package com.ruoyi.output.service.thi…...
llama网络结构及源码
目录 模型初始化 config lm_head transformer wte h rms_1/rms_2 attn c_attn c_proj 线性层mlp ln_f rope_cache mask_cache kv_caches tokenizer tokenizer初始化 tokennizer.encoder 位置编码和mask 确定最大文本长度 建立rope_cache 建立mask_cache …...
828华为云征文|Flexus云服务器X实例部署宝塔运维面板
本次华为云Flexus云服务器X实例部署宝塔运维面板教学,这次是推陈出新啊 之前的云耀云服务器L实例已经很不错了,大力赞叹华为云的 同时感谢华为云提供优惠卷,只能说白嫖真是太棒了 华为云近期正在筹办华为云828企业节活动,90款免…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解
文章目录 一、开启慢查询日志,定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
摘要:在消费市场竞争日益激烈的当下,传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序,探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式,分析沉浸式体验的优势与价值…...
在ubuntu等linux系统上申请https证书
使用 Certbot 自动申请 安装 Certbot Certbot 是 Let’s Encrypt 官方推荐的自动化工具,支持多种操作系统和服务器环境。 在 Ubuntu/Debian 上: sudo apt update sudo apt install certbot申请证书 纯手动方式(不自动配置)&…...
