使用 css 实现文字单行居右, 换行居左展示

给外层盒子设置居右展示, 子盒子设置居左。

原理是,如果子盒子没有换行,那么子盒子的长度就是内容的长度,它根本没有空间将字体移动居左,父盒子的居左样式就会生效,子盒子就会居左展示。
在这里插入图片描述

当子盒子里面的文字换行了,那么子盒子的长度也被撑大了,这时候子盒子的居左就会生效了, 因为第一行是满的所以就算居左也和居右没有什么两样
在这里插入图片描述

export function createTitle(exeTitle: string) {return `<div id="hex-exe-new-title"><i></i><i class="title-line"></i><i class="title-line"></i><i class="title-line"></i><i class="title-line"></i><span>&nbsp;&nbsp;原作业原作业原作业::${exeTitle}&nbsp;&nbsp;</span></div>`;
}
  #hex-exe-new-title {text-align: right;span {display: inline-block;text-align: left;}}

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

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

相关文章

3.1 Linux时间子系统

目录 一时间子系统作用二 时间子系统初始化三 时间子系统框架 一时间子系统作用 1 提供时间 2 提供时钟 3 提供进程轮询 从应用层&#xff0c;分析其使用方法 从驱动层&#xff0c;给出timer和hrtimer的使用示例 二 时间子系统初始化 分别从介绍各个模块初始化做了些什么工作…

在SOLIDWORKS中如何提升保存PDF版本文件的清晰度

随着Solidworks年复一年的不断更新&#xff0c;不仅仅是整个软件的性能上的提升&#xff0c;其在输出文件的功能上也同样在精益求精。 但对于老版本的使用者和希望能让输出文件清晰度更进一步的使用者而言&#xff0c;可能目前我们所能达到的普通文件输出清晰度远远无法达到他们…

如何将ONLYOFFICE与Python应用程序集成

ONLYOFFICE是一项功能强大的开源文档编辑器&#xff0c;可以将文本文档、电子表格和演示文稿、电子表单编辑功能集成至任何编程语言编写的 Web 应用程序中。最新的7.5版本编辑器可以支持编辑PDF文件&#xff08;批注、绘图等&#xff09;。在本文中&#xff0c;我们会带你了解如…

【分享】Java Builder 建造者模式之案例分享

介绍 建造者模式&#xff08;Builder&#xff09;核心目的是通过使用多个简单对象一步步构建出一个复杂对象。通过将复杂对象的构造过程拆分为多个简单的步骤&#xff0c;使得创建对象更加灵活&#xff0c;可读性和可维护性更强。 使用场景 创建一个由多个部分组成的复杂对象…

这样写Allure生成测试报告,学会直接涨薪5k

Allure是一个开源的测试报告生成框架&#xff0c;提供了测试报告定制化功能&#xff0c;相较于我们之前使用过pytest-html插件生成的html格式的测试报告&#xff0c;通过Allure生成的报告更加规范、清晰、美观。 pytest框架支持使用Allure生成测试报告&#xff0c;接下来让介绍…

SpringBoot整合knife4j生成Api文档

一、介绍 先看效果 ①&#xff1a;Swagger 介绍 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(https://swagger.io/)。 它的主要作用是&#xff1a; 使得前后端分离开发更加方便&#xff0c;有利于团队协作 接口的文档…

Doris-集群部署(四)

创建目录并拷贝编译后的文件 1&#xff09;创建目录并拷贝编译后的文件 mkdir /opt/module/apache-doris-0.15.0 cp -r /opt/software/apache-doris-0.15.0-incubating-src/output /opt/module/apache-doris-0.15.02&#xff09;修改可打开文件数&#xff08;每个节点&#x…

oracle数据库巡检常见脚本-系列三

简介 作为数据库管理员&#xff08;DBA&#xff09;&#xff0c;定期进行数据库的日常巡检是非常重要的。以下是一些原因&#xff1a; 保证系统的稳定性&#xff1a;通过定期巡检&#xff0c;DBA可以发现并及时解决可能导致系统不稳定的问题&#xff0c;如性能瓶颈、资源利用率…

TIDB基础

TIDB整个逻辑架构跟MYSQL类似&#xff0c;如下&#xff1a; TIDB集群&#xff1a;相当于MYSQL的数据库服务器&#xff0c;区别是MYSQL数据库服务器为单进程的&#xff0c;TIDB集群为分布式多进程的。 数据库&#xff1a;同MYSQL数据库&#xff0c;数据库属于集群&#xff0c;…

VM CentOS7安装ffmpeg

项目中涉及给视频添加水印&#xff0c;使用到了ffmpeg&#xff0c;windows系统可直接使用&#xff0c;Linux需要手动编译完成ffmpeg后才可正常使用。 配置yum源: 备份原repo文件 cd /etc/yum.repos.d/mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.r…

编写自己的CA和TA与逆向

参考内容《手机安全和可信应用开发》 https://note.youdao.com/s/MTlG4c1w 介绍 TA的全称是Trust Application&#xff0c; 即可信任应用程序。 CA的全称是Client Applicant&#xff0c; 即客户端应用程序。 TA运行在OP-TEE的用户空间&#xff0c; CA运行在REE侧。 CA执行时代…

前端 Ajax 技术有哪些优缺点?

Ajax&#xff08;Asynchronous JavaScript and XML&#xff09;是一种基于前端 JavaScript 技术的异步通信技术&#xff0c;可以在不刷新整个页面的情况下向服务器发送请求和接收响应&#xff0c;以实现动态加载内容和交互效果。下面是 Ajax 技术的优缺点&#xff1a; 优点&am…

css实现三行,溢出显示省略号(后有js实现逻辑)

css实现代码&#xff1a; .text-container {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis; }解释&#xff1a; 1.-webkit-box 和 -webkit-box-orient 属性将容器元素设置为一个垂直方向的弹性盒子&…

需求调研计划及用户需求调研单

1.目的 2.概述 3.需求调研计划 3.1调研目的 3.2调研范围 3.2.1.调研的职能范围 3.2.2.调研的业务范围 3.2.3.调研的地点范围 3.3调研方式 3.4调研阶段 3.5具体时间安排 软件开发全文档获取&#xff1a;点我获取 1、需求调研计划 2、用户需求调研单 项目名称 客…

C++ auto的作用

auto的作用 保护变量的值不被修改&#xff0c;防止意外的错误操作&#xff1b;声明函数参数为常量引用&#xff0c;以避免函数修改参数的值&#xff1b;声明类的成员函数为常量成员函数&#xff0c;以确保函数不修改对象的状态。 1 const关键字用于声明一个常量&#xff0c;…

【EI会议投稿】第九届电子技术和信息科学国际学术会议(ICETIS 2024)

第九届电子技术和信息科学国际学术会议&#xff08;ICETIS 2024&#xff09; The 9th International Conference on Electronic Technology andInformation Science&#xff08;ICETIS 2024&#xff09; ICETIS会议始于2016年&#xff0c;先后吸引众多来自国内外高等院校、科…

2023亚太杯数学建模竞赛C题新能源电动汽车数据分析与代码讲解

C题论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解、问题4模型的建立和求解、问题5模型的建立和求解&#xff09;、模型的评价等等&#xff0c; 视频讲解如下&…

组件库篇 | EUI | 按钮

组件库篇 | EUI | 按钮 前言 从本章开始,我将会一一演示所有组件所有函数的调用代码,以方便读者掌握组件的具体用法。但这并不意味着在实际使用中要用到所有的函数,请读者按需取用。 基本介绍 EUI提供了三种类型的按钮,如下: 常规按钮 Button文字按钮 TextButton图标按钮…

《洛谷深入浅出基础篇》P1113 杂物——DAG

上链接&#xff1a;P1113 杂务 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P1113 上题干&#xff1a; 题目描述 John 的农场在给奶牛挤奶前有很多杂务要完成&#xff0c;每一项杂务都需要一定的时间来完成它。比如&#xff1a;他们要将奶牛…