英语单词组件- 单词在句子中，上面显示中文下面显示音标 css样式

原先效果：

改进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>
posted @ 2022-10-28 21:44  彭成刚  阅读(145)  评论(0)  编辑  收藏  举报