原先效果：

改进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. FFmpeg的录制命令

    FFmpeg的录制命令 命令的作用 它可以捕捉桌面窗口,摄像头的视频流和麦克风的音频流. 命令的格式 ffmpeg [输入格式] [输入选项] -i [输入设备索引] [输出选项] 输出文件 其中输入 ...

  2. 该换Linux版本了！

    提起开发,程序员们更青睐于不同版本的Linux操作系统而不是Windows.为什么?因为Linux操作起来更安全.快捷,最重要的是,它的发行版本众多.你可以根据需要挑选最适合的那一款.那么,问题来了, ...

  3. PVE上启用Intel核显的SR-IOV vGPU

    介绍 Intel SR-IOV vGPU是一种硬件虚拟化技术,它允许多个虚拟机共享单个物理GPU,而不会降低性能.SR-IOV定义了一种标准方法,通过将设备分区为多个虚拟功能来共享物理设备功能.每个虚 ...

  4. Oracle ADG + Keepalived 切换演练

    客户的一套生产环境采用的架构是Oracle ADG + Keepalived,近期需要进行切换演练,要求我这边保障.ADG本身切换倒没啥可说的,但引入keepalived软件,就需要提前研究下这个架构 ...

  5. MySQL主主+Keepalived架构安装部署

    需求:根据当前客户的生产环境,模拟安装部署一套MySQL主主+Keepalived架构的测试环境,方便后续自己做一些功能性的测试. 1.准备工作 2.MySQL安装部署 3.MySQL主主配置 4.K ...

  6. 2021 ASP.NET Core 开发者路线图

    GitHub地址:https://github.com/MoienTajik/AspNetCore-Developer-Roadmap/blob/master/ReadMe.zh-Hans.md

  7. [Java]ArrayList源码解析

    ArrayList源码解析 1. 核心源码解读 package java.util; import java.util.function.Consumer; import java.util.func ...

  8. JS 判断对象属性是否存在，判断是否包含某个属性，是否为自身属性

    壹 ❀ 引 看过博主JS 疫情宅在家,学习不能停,七千字长文助你彻底弄懂原型与原型链这篇文章的同学应该知道,文中有专门介绍这个问题.那么为什么我要另起一篇再说一次呢?原因有两个,一是介绍原型与原型链的 ...

  9. 编写高效的代码，你应该了解Array、Memory、ReadOnlySequence

    针对"缓冲区"编程是一个非常注重"性能"的地方,我们应该尽可能地避免武断地创建字节数组来存储读取的内容,这样不但会导致大量的字节拷贝,临时创建的字节数组还会带来 ...

  10. 【OpenGL ES】绘制圆形

    1 前言 ​ [OpenGL ES]绘制三角形 中介绍了绘制三角形的方法,[OpenGL ES]绘制正方形中介绍了绘制正方形的方法,本文将介绍绘制圆形的方法. ​ OpenGL 以点.线段.三角形为图 ...