原先效果：

改进demo效果

优化点

  • 音标长度超出，或者中文超出，总宽度会按照最长的走
  • 居中显示

再次优化

  • line-height: 22px; 加入这个 对齐中间行（字号大小会让绝对上下高度，对不齐中间的行）
  • 发现有4像素的下沉，中间行，在最下面一行加入 margin-bottom: 4px; 顶上，就对齐了。

This is a

男孩
boy's
[boi1111]

book. This is a

男孩
boy's
[boi1111]

book.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

  </head>

  <body>

    <div style="width: 250px; background-color: #f2f2f2;">

      <p>

        This is a

        <span

          style="

            display: inline-block;

            vertical-align: middle;

            text-align: center;

            line-height: 22px;

          "

        >

          <span style="display: block; font-size: 12px;">男孩</span>

          <span style="display: block;">boy's</span>

          <span style="display: block; font-size: 12px;margin-bottom: 4px;">[boi1111]</span>

        </span>

        book. This is a

        <span

          style="

            display: inline-block;

            vertical-align: middle;

            text-align: center;

          "

        >

          <span style="display: block; font-size: 12px;">男孩</span>

          <span style="display: block;">boy's</span>

          <span style="display: block; font-size: 12px;">[boi1111]</span>

        </span>

        book. This is a

        <span

          style="

            display: inline-block;

            vertical-align: middle;

            text-align: center;

          "

        >

          <span style="display: block; font-size: 12px;">男孩</span>

          <span style="display: block;">boy's</span>

          <span style="display: block; font-size: 12px;">[boi1111]</span>

        </span>

        book.

      </p>

    </div>

  </body>

</html>

英语单词组件- 单词在句子中，上面显示中文下面显示音标 css样式的更多相关文章

  1. tp3.2替换模板中如果需要替换的图片在css样式表中怎么办？

    因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...

  2. 解决Mac中anaconda作图中文异常显示的问题

    说明 本篇主要针对在MAC系统中Anaconda环境下,matplotlib显示不了中文的问题,提出解决Python绘图时中文显示的方法. 运行环境 macOS Mojave 10.14.6 Pyth ...

  3. HTML中超出文本使用省略号替代的CSS样式

    a{ display: block; /*定义显示形式*/ overflow: hidden; /*截取超出字符*/ text-overflow: ellipsis; /*超出字符以…代替*/ whi ...

  4. Fedora桌面系统Idea中的部分中文无法显示解决

    在Linux 桌面开发已经有一段时间了,个人用的是最新的Fedora ,装上idea后,写代码再加中文注释的时候发现部分汉字打不出来,删除的时候发现汉字占着位,只是显示不出来,最初以为是注释问题,调整 ...

  5. IT公司100题-10-翻转句子中单词的顺序

    问题描述: 输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变. 句子中单词以空格符隔开.为简单起见,标点符号和普通字母一样处理. 例如输入“Hello world!”,则输出“world ...

  6. 翻转句子中单词的顺序 C语言

    输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.句子中单词以空格符隔开. 为简单起见,标点符号和普通字母一样处理. 比如将"I am a student"转化为&q ...

  7. H面试程序（4）：翻转句子中单词的顺序 .

    题目:输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变. 句子中单词以空格符隔开.为简单起见,标点符号和普通字母一样处理. 例如输入“I am a student.”,则输出“stude ...

  8. Javascript 将一个句子中的单词首字母转成大写

    Javascript 将一个句子中的单词首字母转成大写 先上代码 function titleCase(str) { str = str.toLowerCase().split(" &quo ...

  9. 【c++】计算句子中单词的平均长度

    Description 编程输入一行文本,计算这行文本的单词平均长度.假设每个单词用至少一个空格或者标点(英文逗号.句号)隔开.使用C++ string类型. Input 输入一行文本,不包含数字 O ...

  10. 7.翻转句子中单词的顺序[ReverseWordOrderInSentence]

    [题目] 输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.句子中单词以空格符隔开.为简单起见,标点符号和普通字母一样处理. 例如输入“I am a student.”,则输出“stud ...

随机推荐

  1. 2.2 CE修改器：未知数值扫描

    本关需要扫描未知数只扫描,要在不知道初始值的情况下找到一个在0到500之间的数值.首先,选择"未知的初始值"扫描方式,在数值类型中选择 4 字节,并点击"首次扫描&quo ...

  2. 从嘉手札<2024-1-29>

    补一下以前的几篇日记 2018-4-6 当一个人不在纠结没有什么 而是开始珍视他所拥有的一切的时候 才算得上真正的成熟 个人的意志 不能因受到社会的压力而软弱 也不能受到自然的压力而萎缩 而应当如冬日 ...

  3. Redis订阅模式在生产环境引起的内存泄漏

    内存泄漏 内存泄漏指的就是在运行过程中定义的各种各样的变量无法被垃圾回收器正常标记为不可达并触发后续的回收流程,主要原因还是因为对可回收对象引用没有去除,导致垃圾回收器通过GC ROOT可达性分析时认 ...

  4. Linux的yum源配置总结

    本文总结归纳了一系列Linux系统的各种yum配置,虽然不一定是标准配置,但都是自己曾真实测过可用的. 1.RHEL6 本地 yum源配置 2.CentOS6 本地 yum源配置 3.OEL5 本地 ...

  5. .NET Core开发实战（第7课：用Autofac增强容器能力）--学习笔记（下）

    07 | 用Autofac增强容器能力:引入面向切面编程(AOP)的能力 如何获取没有命名的服务呢? // Autofac 容器获取实例的方式是一组 Resolve 方法 var service = ...

  6. JS leetcode 旋转数组 题解分析

    壹 ❀ 引 今天来做一道同样简单,但是挺有趣的题,题目来自leetcode189. 旋转数组,题目描述如下: 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: ...

  7. Python——检测Popen返回的stdOutMsg中是否是否包含指定字符，并提取指定位置的信息

    问题背景: Python 中经常会需要通过subprocess.PoPen函数下发Shell Command,与操作系统进行交互.一些情况下,还需要分析shell command的返回值,提取有用信息 ...

  8. Sora文生视频模型深度剖析：全网独家指南，洞悉98%关键信息，纯干货

    Sora文生视频模型深度剖析:全网独家指南,洞悉98%关键信息,纯干货 Sora是一个以视频生成为核心的多能力模型,具备以下能力: 文/图生成视频 视频生成视频 1分钟超长高质量视频生成 视频裂变多视 ...

  9. springboot项目使用外置tomcat7部署项目

    Springboot使用外置tomcat7部署运行 1.pom修改 2.tomcat底下config下catalina.properties 3.在tomcat的lib文件夹下添加 javax.el- ...

  10. kafka学习笔记03-消息生产者producer

    kafka学习笔记03-消息生产者producer 发送消息整体流程示意图 消息发送的流程示意图: (From:High-level overview of Kafka producer compon ...