原先效果：

改进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. 深度学习应用篇-自然语言处理-命名实体识别[9]：BiLSTM+CRF实现命名实体识别、实体、关系、属性抽取实战项目合集（含智能标注）

    深度学习应用篇-自然语言处理-命名实体识别[9]:BiLSTM+CRF实现命名实体识别.实体.关系.属性抽取实战项目合集(含智能标注) 1.命名实体识别介绍 命名实体识别(Named Entity R ...

  2. 《Java 面经手册》PDF，417页11.5万字，完稿！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 我膨胀了 ,在看了大部分以面试讲解的 Java 文章后,发现很多内容的讲解都偏向于翻 ...

  3. 求助：Docker怎么连接mongoDB?

    首先 在playwithDocker中通过docker pull mongo引入mongo 然后创建容器 docker run -it --name mymongo -p 27017:27017 -v ...

  4. KB0002.对DoraCloud的桌面模板系统盘进行扩容

    KB0002.对DoraCloud的桌面模板系统盘进行扩容 DoraCloud的桌面是根据桌面模板创建的.桌面模板包含了系统盘.有时系统盘的空间不满足需求,就需要对系统盘大小进行调整. 我们以Hype ...

  5. 双层nn逻辑回归BP过程的另外一种解释

    双层nn逻辑回归 吴恩达的双层nn逻辑回归的一些符号说明比较复杂导致视频难以理解,这里简单做一个说明 注意:阅读下面内容需要具备基本的矩阵求导知识 下面是手推过程,有空在进行修改

  6. 零基础入门学习Java课堂笔记 ——day04

    Java数组 1.数组概述 定义:数组是相同类型的有序集合,同一组同一类型的数据可以按照先后次序排列组合在一起,其中一个数据可以称为元素,每个数组元素可以通过一个下表访问它们 2.数组声明创建 dat ...

  7. Oracle删除索引规范

    1.背景概述 2.索引删除规范 3.根本解决方案及建议 1.背景概述 近期应用升级上线过程中,存在删除业务表索引的变更操作,且因删除索引导致次日业务高峰时期,数据库响应缓慢的情况,经定位是缺失索引导致 ...

  8. 用set做一轮无重复纯随机

    前端时间面腾讯的时候,一位老师问了一个相当有趣的问题:假设存在一个音乐播放器,里面有一个100首歌的歌单.现在需要做一个随机播放功能,要求不重复的随机播放完一百首歌.当时脑子短路了没想出来,几天突然意 ...

  9. NC16544 简单环

    题目链接 题目 题目描述 给定一张n个点m条边的无向图,求出图中所有简单环的数量.(简单环:简单环又称简单回路,图的顶点序列中,除了第一个顶点和最后一个顶点相同外,其余顶点不重复出现的回路叫简单回路. ...

  10. pt-table-checksum对比数据测试（dsns方式）

    1.1.工作原理 pt-table-checksum会对校验的表数据进行数据块(数据块大小根据服务负载情况调整)划分,并对数据块数据进行checksun处理:存储在建立的表中.在主库中执行基于stat ...