原先效果：

改进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. CSS概念与CSS选择器

    CSS简述 CSS被称为级联样式表或者CSS样式表.CSS也是一种标记语言. CSS主要用于设置HTML页面中的: 1.文本内容(字体,大小,对齐方式等), 2.图片的外形(宽高,边框样式,边距等), ...

  2. 【链表】【python】力扣24. 两两交换链表中的节点【超详细的注释和解释】

    目录 说在前面的话 前言 一.题目(力扣24. 两两交换链表中的节点) 二.题目分析 实现完整代码(Python实现) 总结 说在前面的话 博主也好长一段时间没有更新力扣的刷题系列了,今天给大家带来一 ...

  3. 【Flink入门修炼】1-2 Mac 搭建 Flink 源码阅读环境

    在后面学习 Flink 相关知识时,会深入源码探究其实现机制.因此,需要现在本地配置好源码阅读环境. 本文搭建环境: Mac M1(Apple Silicon) Java 8 IDEA Flink 官 ...

  4. IntelliJ IDEA 在电脑上安装多个JDK 切换的方法

    在电脑上来回切换多个版本的JDK进行开发,方法很简单: 1.下载jdk 下载的时候不要下载安装包,而是下载zip包,这样直接解压就可,不污染注册表,难引起其他问题 2.解压后 把JDK配置到IDEA里 ...

  5. ABC 312

    前三题氵 D 给定一个由 (,?,) 组成的字符串.每个 ? 可以设定为任意括号.求有几种设定方法使得整个是合法括号序列. 套路,dp E 给定 \(n\) 个两两不相交的长方体,对每个长方体,求有多 ...

  6. mysql备份导入

    mysqldump -uroot -p --single-transaction --master-data=2 --flush-logs --flush-privileges --routines= ...

  7. JS Leetcode 264. 丑数 II 题解分析，当暴力无法暴力，让我们弃武从文了解三指针

    壹 ❀ 引 我在JS Leetcode 263. 丑数 题解分析,来认识有趣的丑数吧一文中记录了简单难度的丑数题,那么这篇题解是它的升级版,题目来自LeetCode264. 丑数 II,题目描述如下: ...

  8. nginx 配置stream模块代理并开启日志配置

    前言 nginx 1.20.1nginx从1.9.0开始,新增加了一个stream模块确保nginx 安装时开启stream模块 ./configure \ -- \--with-stream \ - ...

  9. SpringBoot+Shiro+LayUI权限管理系统项目-4.实现部门管理

    1.说明 只讲解关键部分,详细看源码,文章下方捐赠或QQ联系捐赠获取. 2.功能展示 3.业务模型 @Data @EqualsAndHashCode(callSuper = false) @Acces ...

  10. 《深入理解Java虚拟机》(七) volatile 变量

    目录 概述 一.内存模型 物理机内存模型 Java内存模型 Java内存模型中有如下的规定: 操作 二.Volatile变量 volatile修改变量后保证所有线程对其可见性 volatile禁止指令 ...