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

news2024/9/29 7:20:05

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

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

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

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.coloradmin.cn/o/1242556.html

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

相关文章

DLL劫持漏洞

以下是自己学习时做的一些笔记&#xff0c;希望对各位有所帮助 DLL劫持漏洞 为什么程序中会有dll的存在 对于 Windows 操作系统&#xff0c;操作系统的大部分功能都由 DLL 提供。 另外&#xff0c;当您在这些 Windows 操作系统之一上运行某一程序时&#xff0c;该程序的很多…

UEC++ day8

伤害系统 给敌人创建血条 首先添加一个UI界面用来显示敌人血条设置背景图像为黑色半透明 填充颜色 给敌人类添加两种状态表示血量与最大血量&#xff0c;添加一个UWidegtComponet组件与UProgressBar组件 UPROPERTY(EditAnywhere, BlueprintReadWrite, Category "Enemy …

怎样通过代理ip提高上网速度

在当今互联网高度发达的时代&#xff0c;我们经常需要使用代理IP来隐藏自己的真实IP地址或提高网络连接速度。然而&#xff0c;有些用户可能会遇到代理IP无法提高网络速度的情况。那么&#xff0c;如何通过代理IP提高上网速度呢&#xff1f;以下是几个技巧&#xff1a; 1.选择…

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

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

G320E是一种低荣声、固定频率的电荷泵型DC/DC转换器

G320E 低噪声电荷泵DC/DC转换器 产品概述&#xff1a; G320E是一种低荣声、固定频率的电荷泵型DC/DC转换器&#xff0c;在输入电压范围在2.7V到5.0V的情况下&#xff0c;该器件可以产生5V的输出电压&#xff0c;最大输出电流达到300mA.G320E外部元件少&#xff0c;非常适合于…

LangChain 7 文本模型TextLangChain和聊天模型ChatLangChain

LangChain系列文章 LangChain 实现给动物取名字&#xff0c;LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储&#xff0c;读取YouTube的视频文本搜索I…

虚拟机解决Linux中Uos和Deepin登录密码忘记的问题 标题Linux Uos Deepin

Uos是切换网络模式解决的(之前有绑定过用户) 因为之前用的是桥接模式登录的时候一直无法联网,改为Nat模式后可以和电脑共用一个网络ip,可以重置密码了,以此解决 ps: 特别说明rw single init/bin/bash 方法和systemd.debug-shell1方法已经失效,不要再做无谓的尝试了Deepin23社区…

人工智能:一种现代的方法 第十四章 概率推理

文章目录 人工智能&#xff1a;一种现代的方法 第十四章 概率推理本章前言14.1 不确定性问题域中的知识表示14.1.1 联合概率分布14.1.2贝叶斯网络 14.2 贝叶斯网络的语义14.2.1表示联合概率分布14.2.2 紧致性14.2.3 节点排序14.2.4 贝叶斯网络中的条件独立关系14.3 条件分布的有…

痤疮分级实验笔记-ResNet

组织数据集 方式1&#xff1a;根据txt文件分类的数据集组织形式&#xff08;放弃&#xff09; 你可以使用Python来读取txt文件中的训练集图片信息&#xff0c;并将这些图片从原始文件夹复制到目标文件夹中。 当程序无法找到标签对应的图片或者目标文件夹中已经存在同名图片时…

IT支持团队的绩效指标和最佳实践

一名员工在远程时因笔记本问题寻求IT支持&#xff0c;尽管他们多次尝试排除故障&#xff0c;但由于缺乏专业知识&#xff0c;最终还是无法访问工作所需的应用程序。这时&#xff0c;他们需要一名专业的 IT 技术人员来指导他们&#xff0c;但他们只能等待有人注意到并回应他们的…

BMS基础知识:BMS基本功能,铅酸和锂电池工作原理,电池系统的重要概念!

笔者有话说&#xff1a; 作为BMS从业者来讲&#xff0c;目前接触的BMS系统并不是很高大尚&#xff0c;但基础功能都是有的。 关于BMS的基本功能&#xff0c;工作原理&#xff0c;运行逻辑等&#xff0c;在此做一个梳理&#xff0c;讲一些最基础的扫盲知识&#xff0c;可以作为…

安全牛《数据分类分级自动化建设指南》发布|美创入选代表厂商,分享智能化探索

近日&#xff0c;安全牛发布《数据分类分级自动化建设指南》研究报告&#xff0c;对数据分类分级的主要技术、实施要点、选型指导、发展趋势等展开深入探讨&#xff0c;为各行业数据分类分级自动化工作落地提供帮助与指引。 美创科技被列为代表推荐厂商&#xff0c;落地案例—农…

Flutter:引领移动开发新潮流,跨平台应用程序的终极解决方案

文章目录 一、介绍二、环境搭建三、基础组件四、生命周期管理五、路由控制六、网络请求七、数据存储八、调试与优化《从零基础到精通Flutter开发》特色内容简介作者简介目录获取方式 一、介绍 Flutter是由Google开发的一款开源移动应用开发框架&#xff0c;它可以帮助开发者快…

PS给图片增加一个白色边框。

问题描述&#xff1a;PS如何给图片增加一个白色边框&#xff1f; 解决办法&#xff1a; 第一步&#xff1a;使用shiftAltA快捷键&#xff0c;在图片四周拉出一个灰白色的边框。如下图所示&#xff1a; 第二步&#xff0c;使用快捷键Ctrlshiftn新建一个图层。 并把新建的图层…

C语言——利用函数递归,编写函数不允许创建临时变量,求字符串长度

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h>int my_strlen(char* str) {if(*str ! \0)return 1my_strlen(str1);elsereturn 0; }int main() {char arr[] "hello";int len my_strlen(arr); //arr是数组&#xff0c;数组传参&#xff0c;传过去的是第…

推荐一款png图片打包plist工具pngPackerGUI_V2.0

png图片打包plist工具&#xff0c;手把手教你使用pngPackerGUI_V2.0 此软件是在pngpacker_V1.1软件基础之后&#xff0c;开发的界面化操作软件&#xff0c;方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件&#xff0c;得到如下目录&#xff0c;双击打开 pngPackerGUI.…

【广州华锐互动】VR线上课件制作软件满足数字化教学需求

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术在教学领域的应用逐渐成为趋势。其中&#xff0c;广州华锐互动开发的VR线上课件制作软件更是备受关注。这种工具为教师提供了便捷的制作VR课件的手段&#xff0c;使得VR教学成为可能&#xff0c;极大地丰…

2.4G射频收发芯片 XL2407P芯片介绍,集成九齐单片机

XL2407P芯片是工作在2.400~2.483GHz世界通用ISM频段,集成微控制器的的SOC无线收发芯片。该芯片集成射频收发机、频率收生器、晶体振荡器、调制解调器等功能模块,并且支持一-对多组网和带ACK的通信模式。发射输出功率、工作频道以及通信数据率均可配置。 芯片内含以EPROM作为内…

HTML5+ API 爬坑记录

背景: 有个比较早些使用5开发的项目, 最近两天反馈了一些问题, 解决过程在此记录; 坑1: plus.gallery.pick 选择图片没有进入回调 HTML5 API Reference 在 联想小新 平板电脑上选择相册图片进行上传时, 打开相册瞬间 应用会自动重启, 相册倒是有打开, 不过应用重启了, 导…

Ajax技

Ajax的特点 异步提交&#xff1a;Ajax采用异步通信方式&#xff0c;能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据&#xff0c;提升了用户体验。无需插件&#xff1a;Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的&#xff0c;无需安装插件或…