TailwindCSS 支持文本文字超长溢出截断、文字文本省略号

前言

文本文字超长截断并自动补充省略号,这是前端日常开发工作中常用的样式设置能力,文字超长截断主要分为单行超长截断和多行超长截断。本文通过介绍基本CSS样式、tailwindcss 类设置两种基础方式来实现文字超长截断。

TailwindCSS 设置

单行文字超长截断

  1. tailwindcss 多个基础类组装
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">测试测试测试测试测试测试</div>
  1. tailwindcss 直接设置特定类 truncate
<div class="truncate">测试测试测试测试测试测试</div>

TailwindCSS 支持文本文字超长溢出截断

多行文字超长截断

如果你想支持多行文本超长截断,可以通过使用 tailwind-line-clamp插件来实现。

参考如下具体步骤

  1. 安装 npm 依赖包;
npm install tailwindcss-line-clamp -D
  1. tailwindcss.config.js 配置插件;
// tailwind.config.jsmodule.exports = {...,plugins: [require("@tailwindcss/line-clamp"),],
};
  1. 设置目标行数的类.line-clamp-{n},可以将本本限制在指定的行数。比如设置文本超出两行后截断添加省略号;
<div class="line-clamp-2">测试测试测试测试测试测试</div>

TailwindCSS 支持文本文字超长溢出截断、文字文本省略号

基本CSS设置

css处理文字截断是通过text-overflow属性实现,用于指定元素中文本溢出时如何进行截断。

单行文字超长截断

.text {white-space: nowrap; /* 防止文本换行 */overflow: hidden; /* 隐藏溢出文本 */text-overflow: ellipsis; /* 使用省略号截断溢出文本 */
}

多行文字超长截断

对于多行文本末尾省略号,通过设置 -webkit-line-clamp属性来指定行数。

.text {display: -webkit-box; /* 将元素作为弹性伸缩盒子展示 */-webkit-line-clamp: 2; /* 限制文本行数为 2 行 */-webkit-box-orient: vertical; /* 设置伸缩盒子为垂直方向 */overflow: hidden; /* 隐藏溢出文本 */text-overflow: ellipsis; /* 使用省略号截断溢出文本 */
}

相关原创文章推荐

  • 在前端项目中开始使用 TailwindCSS
  • TailwindCSS 如何配置默认单位为px
  • TailwindCSS 多主题色配置
  • TailwindCSS 如何设置 placeholder 的样式
  • TailwindCSS 如何处理RTL布局模式
  • Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果

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

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

相关文章

WPF仿网易云搭建笔记(2):组件化开发

文章目录 前言专栏和Gitee仓库依赖属性实战&#xff1a;缩小&#xff0c;全屏&#xff0c;关闭按钮依赖属性操作封装主窗口传递this本身给TitleView标题控件主要代码MainWindow.xmalMainWindow.cs依赖属性方法封装TitleView.csTitleViewModelTitleViewModel实现效果 前言 这次…

基于以太坊的智能合约开发Solidity(函数继承篇)

参考教程&#xff1a;【实战篇】1、函数重载_哔哩哔哩_bilibili 1、函数重载&#xff1a; pragma solidity ^0.5.17;contract overLoadTest {//不带参数function test() public{}//带一个参数function test(address account) public{}//参数类型不同&#xff0c;虽然uint160可…

发送、接收消息,界面不及时刷新

发送、接收消息后 UI 没展示&#xff0c;不及时刷新&#xff0c;大概率 是 SDK 的 UI 刷新功能被干扰&#xff0c;参考下面排查&#xff1a; 检查 initWithAppkey 和 connectWithToken 使用的是否是 IMKit 核心类 RCIM 的方法&#xff0c;如果不是&#xff0c;请换成 RCIM 的。…

【刷题】位运算

2 n 2^n 2n 1<<n判断某一位是否为1 s&1<<k将上面两个组合&#xff0c;可以得到判断一个集合中哪些内容包含&#xff0c;遍历所有情况。 100140. 关闭分部的可行集合数目 一个公司在全国有 n 个分部&#xff0c;它们之间有的有道路连接。一开始&#xff0c;…

CentOS 7 离线安装达梦数据库8.0

前期准备工作 确认操作系统的版本和数据库的版本是否一致 ## 查看系统版本&#xff1a;cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core)关闭防火墙和Selinux # 查看selinux是不是disabled / enforce cat /etc/selinux/config## 查看防火墙状态 firewall-cmd …

数据结构之归并排序及排序总结

目录 归并排序 归并排序的时间复杂度 排序的稳定性 排序总结 归并排序 归并排序大家只需要掌握其递归方法即可&#xff0c;非递归方法由于在某些特殊场景下边界难控制&#xff0c;我们一般很少使用非递归实现归并排序。那么归并排序的递归方法我们究竟是怎样实现呢&#xff…

PHP医院手术麻醉系统源码,laravel、vue2 、mysql技术开发,自主知识产权,二开快捷

医院手术麻醉系统全套源码&#xff0c;有演示&#xff0c;自主知识产权 技术架构&#xff1a;PHP、 js 、mysql、laravel、vue2 手术麻醉临床信息管理系统是数字化手段应用于手术过程中的重要组成部分&#xff0c;用数字形式获取并存储手术相关信息&#xff0c;既便捷又高效。…

每日一练2023.12.10—— 倒数第N个字符串【PTA】

题目链接&#xff1a;L1-050 倒数第N个字符串 题目要求&#xff1a; 给定一个完全由小写英文字母组成的字符串等差递增序列&#xff0c;该序列中的每个字符串的长度固定为 L&#xff0c;从 L 个 a 开始&#xff0c;以 1 为步长递增。例如当 L 为 3 时&#xff0c;序列为 { a…

Qt Creator设置IDE的字体、颜色、主题样式

Qt是一款开源的、跨平台的C开发框架&#xff0c;支持Windows、Linux、Mac系统&#xff0c;从1995发布第一版以来&#xff0c;发展迅猛&#xff0c;最开始是用于Nokia手机的Symbian(塞班)系统和应用程序开发&#xff0c;现在是用于嵌入式软件、桌面软件(比如WPS、VirtualBox)、A…

【图论笔记】克鲁斯卡尔算法(Kruskal)求最小生成树

【图论笔记】克鲁斯卡尔算法&#xff08;Kruskal&#xff09;求最小生成树 适用于 克鲁斯卡尔适合用来求边比较稀疏的图的最小生成树 简记&#xff1a; 将边按照升序排序&#xff0c;选取n-1条边&#xff0c;连通n个顶点。 添加一条边的时候&#xff0c;如何判断能不能添加…

Python实现PDF-Excel

轻松解决PDF格式转Excel&#xff08;使用python实现&#xff09; 实现思路&#xff1a; 要将PDF转换为Excel&#xff0c;可以使用以下步骤&#xff1a; 解析PDF内容&#xff1a;首先&#xff0c;需要使用Python中的第三方库&#xff08;如PyPDF2、pdfminer等&#xff09;来解…

西南科技大学C++程序设计实验十二(文件流操作)

一、实验目的 1. 熟悉文件的基本操作; 2. 在类中添加打开文件、保存文件、读取文件等处理函数; 二、实验任务 1. 分析完善程序:主函数创建一个文件对象,每次打开文件,在其尾部添加数据。如果文件不存在,则新建该文件。请将空白处需要完善的功能补充完整。 #include …

mybatis-config.xml的配置

1&#xff1a;MyBatis 的常规配置文件 mybatis-config.xml 包含了对 MyBatis 框架的全局配置&#xff0c;下面是一个常见的示例&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD…

Java代码重构技巧:提高可维护性和可扩展性

引言&#xff1a; 在软件开发过程中&#xff0c;代码重构是一项非常重要的任务。通过对代码进行重构&#xff0c;可以提高代码的可维护性和可扩展性&#xff0c;减少代码的复杂度&#xff0c;增加代码的可读性和可测试性。本文将介绍一些常用的Java代码重构技巧&#xff0c;帮助…

HTML中表格的语法及使用(详解)

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中表格的语法及详细使用以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以在评论区留…

Java集合框架定义以及整体结构

目录 一、Java集合框架1.1 什么是java集合框架1.2 集合与数组 二、集合框架具体内容2.1 整体框架2.2 遗留类和遗留接口1.3 集合框架设计特点 参考资料 一、Java集合框架 1.1 什么是java集合框架 Java集合框架&#xff08;Java Collections Framework&#xff09;是Java平台提…

高云GW1NSR-4C开发板上手使用

1.开发板 核心板&#xff0c;主芯片GW1NSR-LV4CQN48P&#xff0c;丝印文字“奥陶纪Octet&#xff0c;QQ群808770961”&#xff1a; 晶振&#xff1a;27MHz&#xff0c;22引脚 两个按键&#xff1a;靠近中间&#xff0c;23引脚&#xff0c;按下为低电平&#xff1b;靠近外侧&…

Flink 读写 HBase 总结

前言 总结 Flink 读写 HBase 版本 Flink 1.15.4HBase 2.0.2Hudi 0.13.0官方文档 https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/docs/connectors/table/hbase/ Jar包 https://repo1.maven.org/maven2/org/apache/flink/flink-sql-connector-hbase-2.2/1…

[Linux] yum安装分布式LNMP架构

1. 在一台主机安装nginx&#xff08;192.168.136.120&#xff09; 1.1 搭建nginx相关的yum源 cd /yum.repos.d mkdir bak mv *.repo bak vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/7/$basearch/ gpgche…

基于Python+Django+mysql图书管理系统

基于PythonDjangomysql图书管理系统 一、系统介绍二、功能展示三、其它系统四、获取源码 一、系统介绍 程序开发软件&#xff1a;Pycharm 数据库&#xff1a;mysql 采用技术&#xff1a; Django(一个MVT框架&#xff0c;类似Java的SSM框架) 人生苦短&#xff0c;我用Python&a…