实现带省略号文本中SVG的垂直居中

问题本质是：行内SVG默认以基线对齐，导致和文本不在同一水平中线；而用flex布局虽能实现垂直居中，但会破坏text-overflow: ellipsis的生效条件——该属性仅对块级容器内的nowrap文本生效，flex容器下子元素布局逻辑改变，省略号无法正常触发。

直接有效的解决方案：

• 保留父容器的overflow: hidden; white-space: nowrap; text-overflow: ellipsis;样式
• 给SVG添加vertical-align: middle样式，让行内SVG和文本垂直中线对齐

修改后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <h2>同时实现省略号与垂直居中</h2>
    <div
      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
    >
      <strong>Warning</strong>
      <svg
        style="
          min-width: 24px;
          max-width: 24px;
          min-height: 24px;
          max-height: 24px;
          vertical-align: middle;
        "
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect width="24" height="24" fill="white" />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M11 13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10V13ZM13 15.9888C13 15.4365 12.5523 14.9888 12 14.9888C11.4477 14.9888 11 15.4365 11 15.9888V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15.9888ZM9.37735 4.66136C10.5204 2.60393 13.4793 2.60393 14.6223 4.66136L21.2233 16.5431C22.3341 18.5427 20.8882 21 18.6008 21H5.39885C3.11139 21 1.66549 18.5427 2.77637 16.5431L9.37735 4.66136Z"
          fill="#323232"
        />
      </svg>
      At iure maiores aut reprehenderit voluptatem aut recusandae alias qui quam
      quos id corrupti deleniti quo nihil earum. Et quia eligendi sed atque
      provident est exercitationem corrupti. Ut consequatur dolorem aut alias
      earum rem deleniti delectus vel fugit voluptatem.
    </div>
  </body>
</html>

原理说明：

• vertical-align: middle会让SVG的垂直中线与文本的x-height（小写字母x的高度）中线对齐，实现视觉上的垂直居中
• 父容器保持原有的溢出样式，因为内容都是行内元素，white-space: nowrap会让所有内容在一行显示，溢出时触发text-overflow: ellipsis

内容的提问来源于stack exchange，提问作者TheAschr