CSS如何让溢出文本旁的图标靠近文本且二者整体在容器内居中

根因分析 #

当前实现未达预期的核心原因是：flex 容器的直接子元素<span>会默认尽可能占据可用的水平空间，长文本撑开后<span>的宽度几乎等于容器宽度，图标只能排在<span>的最右侧，二者无法作为一个整体居中。

解决方案 #

推荐使用新增内容包裹层的方案，无需硬编码图标宽度，兼容性更强：

1. 修改HTML结构 #

在文本和图标外层新增一层包裹容器：

<div class="container">
  <div class="content-wrapper">
    <span>Lorem ipsum dolorsit amet, consectetur adipiscing</span>
    <i class="material-icons">face</i>
  </div>
</div>

2. 新增对应CSS规则 #

给包裹层添加inline-flex布局，宽度由内部内容自动撑开：

/* 原有CSS无需修改，新增以下规则即可 */
.content-wrapper {
  display: inline-flex;
  align-items: center;
}

无需修改HTML的可选方案 #

如果不想调整HTML结构，也可以直接修改现有CSS实现效果：

.container {
  width: 150px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: #F3F3F3;
}

span {
  text-align: center;
  /* 新增以下2行，预留图标+间距的展示空间 */
  max-width: calc(100% - 28px);
  word-break: break-word;
}

i {
  margin-left: 4px;
  /* 新增以下1行，避免图标被挤压变形 */
  flex-shrink: 0;
}

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