当前位置: 首页 > 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;
    }
  }

相关文章:

  • 【学历是敲门砖】如果你想有个好的起点,不妨冲一冲计算机考研,这本书将会助你一臂之力
  • 交直流一体化电源系统测试步骤详解
  • 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内网穿透配置以及相关端口、过程解释
  • 乌方:泽连斯基只接受与普京会谈,拒见其他俄代表
  • 演员黄晓明、金世佳进入上海戏剧学院2025年博士研究生复试名单
  • 十三届全国政协经济委员会副主任张效廉被决定逮捕
  • 高培勇:中国资本市场的发展应将预期因素全面纳入分析和监测体系
  • 印度一战机在巴基斯坦旁遮普省被击落,飞行员被俘
  • 习近平会见委内瑞拉总统马杜罗