css文字和span在一行对不齐

1.需求背景

父盒子中有两个span,但是span中的文字对不齐。如下图,明显右边的文字偏高
image.png
处理后的效果(已经对齐,图中标记的是基本的div结构):
image.png

2.该问题出现的原因:

span1设置的高度比span2内中文字大小 都小的时候,会出现这种对不齐的状况。 如果span1设置的高度比span2的文字大小 大的话是不会出现这种情况的。
image.png

3.如何处理

思路1.使用display(不行)

1.使用display,我们都知道display能很好的去居中盒子或者文字。于是我们设置给父盒子设置display:flex,align-items: center;
image.png
但是文字多的时候,会撑开,不符合我们这边的需求。我们是要求两行,并且第二行文字应该接着开头,如果超过两行就显示…
image.png

思路2:使用vertical-align: middle(正确,但注意要给两个span都加上)

前面我一直给span的其中一个盒子加vertical-align: middle,但是总是对不齐,之前学习的时候就记得要用这个,后面想了很久,才记得是要给两个span子盒子都加上(这里写个博客加深下印象)。另外就是你父盒子身上加vertical-align: middle是不会让这两个span中的文字对齐的,因为这个属性不会继承,大家可以试试。
image.png

最后把超出两行显示…的css加上即可:

注意:这个是加在父盒子身上的,而且一定要一个max-height,原因是text-overflow仅适用于具有固定宽度的块级元素。不直接加height是因为当标题不多的时候就可以自适应。

  max-height: 102px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

最后效果:
image.png

4.完整的代码(.vue文件)

<template>
  <div class="home">
    <div class="demo_box">
      <div class="title_box">
        <span class="span1">必修</span>
        <span class="span2">这是标题啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'HomeView',
    data() {
      return {
      }
    },
    created() {
    },
    methods: {
    },
  };
</script>
<style lang="less" scoped>
  .home {
    .demo_box {
      margin: 50px auto;
      width: 300px;
      height: 400px;
      border: 1px solid red;

      .title_box {
        width: 100%;
        padding: 20px 10px;
        border-bottom: 1px solid #ccc;
        // display: flex;
        // align-items: center;
        // vertical-align: middle;

        max-height: 102px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        .span1 {
          width: 75px;
          height: 20px;
          background: rgba(0, 128, 255, 0.1);
          border-radius: 18px;
          color: #0080FF;
          display: inline-block;
          text-align: center;
          line-height: 20px;
          font-size: 16px;
          margin-right: 10px;
          vertical-align: middle;
        }

        .span2 {
          font-size: 25px;
          vertical-align: middle;
        }
      }
    }
  }
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

thsi指针用法总结

1 c类对象中的变量和函数是分开存储的 2 所以对象共用一份成员函数&#xff0c;类的大小是指非静态的成员变量&#xff1b; this 完成链式操作 const 修饰成员函数

【Java 解析全国详细地址】Java 利用正则表达式完美解析全国省市区地址

这里写自定义目录标题 Java使用正则解析省市区/县 具体地址问题场景上demo运行结果 Java使用正则解析省市区/县 具体地址 问题场景 OCR识别营业执照 获取详细地址并拆分 上demo import java.util.HashMap; import java.util.Map; import java.util.regex.Matcher; import j…

使用API有效率地管理Dynadot域名,自查账户信息

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

日本岛津电子天平UW UX 系列series 精密电子天平Shimadzu使用说明

日本岛津电子天平UW UX 系列series 精密电子天平Shimadzu使用说明

2024春季春日主题活动策划方案

2024解冻派对“春日浪漫”主题活动策划方案-32P 方案页码&#xff1a;32页 文件格式&#xff1a;pptx 方案简介&#xff1a; 春来一季&#xff0c;新生欢喜 花香丨微风丨阳光 活动唤起【春日浪漫记忆】&#xff01; 年轻人不一样的派对活动 可以与朋友/小朋友/家人互动…

MT3030 天梯赛

跟MT3029战神小码哥类似&#xff0c;都是贪心堆。注意开long long 这里的堆顶为战斗力最小的&#xff0c;便于贪心的反悔操作。先按容忍度从大到小排序&#xff08;q中总容忍度取决于最小的容忍度&#xff09;&#xff0c;再向q中存数&#xff0c;存到不能容忍之后再把堆顶踢出…

最简单也最复杂的德语动词,柯桥德语培训

德语人一定遇到过这个难题&#xff1a;ie组合到底发什么音&#xff1f; 说起haben&#xff0c;大家可能第一感觉是“这么简单的动词也要讲&#xff1f;不就是‘拥有’的意思吗&#xff1f;” 没错&#xff0c;haben的基本含义是“拥有&#xff0c;包含”&#xff0c;但是在某些…

Vue3后台管理系统推荐

目录 项目概述 &#x1f35f; 项目展示 功能特点 &#x1f957; 结语 &#x1f4a8; 项目概述 &#x1f35f; 基于Vue 3框架与Element-Plus UI组件库技术精心构建的后端管理模板。该模板系统已成功实现一个基础的权限管理模块&#xff0c;宗旨在于为追求高效二次开发的开发…

制作一个RISC-V的操作系统十四-任务同步和锁

文章目录 并发与同步临界区和锁锁死锁解决死锁自旋锁&#xff08;spin lock&#xff09;原子性问题原子操作实现amoswap.w.aq例子 另一种方法自旋锁的注意事项代码其他同步技术 并发与同步 控制流&#xff1a;可理解为任务或进程 中断也可以理解为一个切换到另一个任务&#…

【Linux网络】DHCP原理与配置

目录 一、DHCP工作原理 1.了解DHCP服务 2.使用DHCP的好处 3.DHCP的分配方式 二、DHCP的租约过程 三、DHCP场景应用实验 一、DHCP工作原理 1.了解DHCP服务 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议&#xff09; 由Internet工作…

<计算机网络自顶向下> 无连接传输UDP

UDP&#xff1a;User Datagram Protocol “尽力而为”的服务 报文可能丢掉或者乱序好处&#xff1a; 效率高&#xff08;不建立连接无拥塞控制和流量控制【应用->传输的速率主机->网络的速率】&#xff09;报文段的头部很小&#xff08;开销小&#xff09;UDP被用于 流媒…

数据结构系列-堆排序当中的T-TOK问题

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 之前我们讲到了堆排序的实现逻辑&#xff0c;那么接下来我们重点关注的就是其中的T-TOK问题 T-TOK说简单点&#xff0c;就是说&#xff0c;假如有10000个数据&#xff08;随机的…

bottle,Python轻量级的Web框架!

目录 前言 安装 特性 基本功能 1. 路由功能 2. 请求参数获取 3. 静态文件服务 4. 模板渲染 高级功能 1. 中间件 2. 插件 3. 异步处理 实际应用场景 1. 小型Web应用 2. RESTful API服务 3. Web界面与后端逻辑分离 4. Web服务的快速原型开发 总结 前言 大家好&#xff0c…

YOLOv9改进策略 | 添加注意力篇 | TripletAttention三重注意力机制(附代码+机制原理+添加教程)

一、本文介绍 本文给大家带来的改进是Triplet Attention三重注意力机制。这个机制&#xff0c;它通过三个不同的视角来分析输入的数据&#xff0c;就好比三个人从不同的角度来观察同一幅画&#xff0c;然后共同决定哪些部分最值得注意。三重注意力机制的主要思想是在网络中引入…

解密数字经济时代,元宇宙企业如何重塑商业价值?

从复盘中感知自我&#xff0c;坚持和过去对话&#xff0c;并引入未来的思考&#xff0c;飞天云动是一个典型的案例。 在科技的飞速发展和数字化浪潮的推动下&#xff0c;元宇宙这一概念如同一颗冉冉升起的新星&#xff0c;吸引了全球的目光。就目前而言&#xff0c;围绕元宇宙…

Ubuntu终端自动补全

文章目录 前言配置安装zsh安装 oh-my-zsh安装自动补全插件zsh-autosuggestions 参考 前言 Oh My Zsh 是一个针对命令行 shell 的开源框架&#xff0c;主要用于增强和美化命令行环境。它建立在 Zsh&#xff08;一种强大的 shell 替代品&#xff09;之上&#xff0c;提供了丰富的…

CountDownLatch

什么是CountDownLatch&#xff1a; CountDownLactch是一个同步工具类&#xff0c;用来协调线程之间的同步&#xff0c;其初始值是一个计数器&#xff0c;为线程的数量&#xff0c;当计时器的值为0时&#xff0c;代表此时所有线程的工作全部已经完成 常用方法&#xff1a; 1.cou…

33 信号产生

目录 1.键盘信号 2.显示器回显过程 3.信号产生方式 4.总结 键盘信号 键盘数据是如何输入给内核的&#xff0c;crtlc是怎么变成信号的&#xff1f; 键盘被按下&#xff0c;肯定是os先知道&#xff0c;os怎么知道键盘上有数据呢&#xff1f; c让操作系统每隔一段时间去轮询每…

Linux中Ctrl+C和Ctrl+Z的区别_实战讲解(超详细)

1、CtrlC和CtrlZ的区别&#xff1a; CtrlZ&#xff1a;暂停进程 即挂起进程 暂停当前进程并将其放到后台。可以在后续恢复执行。 暂停的进程仍然占用系统内存 CtrlC&#xff1a;终止进程 终止进程后&#xff0c;程序代码占用的内存会释放掉 2、实战讲解 跑人工智能代码的时候…
最新文章