原先效果：

改进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. 从嘉手札<2023-10-25>

    晨辉明灭 启明星低垂的挂在天边 烟霞浅浅的铺满了东方的天幕 赤红中张扬着睥睨的紫光 可惜 不过又是无趣的一天 我百无聊赖的抬起头 从缝隙里看向窗外的天空的一角 只是觉得无趣 一天天的日子如流水般远去 ...

  2. Axure谷歌浏览器扩展程序下载及安装方法(免FQ)

    在用Axure在chrome查看原型时,没有安装Axure谷歌浏览器插件时无法显示会有提示信息,如果未FQ按照提示是无法直接安装扩展程序的,这里提供插件下载地址并教大家如何安装插件. 平时在使用谷歌浏 ...

  3. Python实现栈、队列、双端队列

    栈的实现 class Stack(): def __init__(self): self.items = [] def push(self, item): self.items.append(item ...

  4. gitee 命令合集（从远程仓库拉取项目到推送项目到远程仓库）

    1.配置用户的信息 git config --global user.name '你的用户名' git config --global user.email '你的邮箱' 2.初始化 Git 仓库,生 ...

  5. KB0003.申请和加载DoraCloud的软件许可

    KB0003.申请和加载DoraCloud的软件许可 DoraCloud安装后,默认处于30天试用状态.如果您购买了软件授权,可以申请许可证. 在[系统][License管理][获取License文件 ...

  6. FireFox 报错Security Connection Failed解决方案

    1.在浏览器中输入:about:config; 2.搜索security.ssl.enable_ocsp_stapling,双击将其修改为FALSE: 3.返回重新访问之前的网站,问题解决

  7. 基于 log4j2 插件实现统一日志脱敏，性能远超正则替换

    前言 金融用户敏感数据如何优雅地实现脱敏? 日志脱敏之后,无法根据信息快速定位怎么办? 经过了这两篇文章之后,我们对日志脱敏应该有了一定的理解. 但是实际项目中,我们遇到的情况往往更加复杂: 1)项目 ...

  8. Javascript中的var变量声明作用域问题

    先看一下这两段代码的执行结果 var name2 = 'What!'; function a() { if (typeof name2 === 'undefined') { console.log(' ...

  9. 【framework】RootWindowContainer简介

    1 前言 ​ RootWindowContainer 是窗口容器的根容器,子容器是 DisplayContent.关于其父类及祖父类的介绍,见→WindowContainer简介.Configurat ...

  10. UML类图入门实战

    介绍 UML--Unified modeling language UML (统一建模语言),是一种用于软件系统分析和设计的语言工具,它用于帮助软件开发人员进行思考和记录思路的结果. UML 本身是一 ...