当前位置: 首页 > news >正文

使用 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.dtcms.com/a/4498.html

相关文章:

  • 【学历是敲门砖】如果你想有个好的起点,不妨冲一冲计算机考研,这本书将会助你一臂之力
  • 交直流一体化电源系统测试步骤详解
  • JUC(Java Util Concurrent)多线程并发库
  • 机器学习的概念和类型
  • ubuntu上查看各个进程的实时CPUMEM占用的办法
  • wireshark 过滤设置
  • webpack环境变量的设置
  • Linux编辑器-gcc/g++使用
  • YOLOv7独家改进: Inner-IoU基于辅助边框的IoU损失,高效结合 GIoU, DIoU, CIoU,SIoU 等 | 2023.11
  • C# Onnx 特征匹配 DeDoDe 检测,不描述---描述,不检测
  • 2022最新版-李宏毅机器学习深度学习课程-P49 GPT的野望
  • SpringBoot学习笔记-实现微服务:匹配系统(上)
  • 家电回收小程序,省心省力的好帮手
  • MethodArgumentNotValidException 与 ConstraintViolationException
  • 【Element】el-progress 自定义进度条
  • 【C++】类与对象(中)
  • Javaweb实现数据库简单的增删改查
  • IOS输入框聚焦会把内容区域顶起
  • 数据库管理变更工具
  • frp内网穿透配置以及相关端口、过程解释
  • API之 要求接口上传pdf 以 合同PDF的二进制数据,multpart方式上传
  • Pickcode:教孩子们编码的新视觉语言
  • 【机器学习】Nonlinear Independent Component Analysis - Aapo Hyvärinen
  • c# 基础语法
  • 注解案例:山寨Junit与山寨JPA
  • 合肥中科深谷嵌入式项目实战——基于ARM语音识别的智能家居系统(三)
  • 【11月比赛合集】48场可报名的数据挖掘大奖赛,任君挑选!
  • 第二十章 多线程
  • java面试-zookeeper
  • 【Linux】-进程间通信-共享内存(SystemV),详解接口函数以及原理(使用管道处理同步互斥机制)