HTML/CSS单行文本宽度限制：带编辑图标的标题适配问题

问题背景 #

开发Web应用时，标题长度不固定，末尾带编辑用的铅笔图标<span>元素，遇到以下布局问题：

• 默认行为下，长标题会换行，撑开元素高度
• 仅限制高度为1.3rem时，标题多行溢出并遮挡其他元素
• 限制高度加overflow:hidden后，标题被生硬截断，铅笔图标也被隐藏无法编辑
• 将图标移到独立元素后，长标题仍生硬截断，短标题时图标远离标题
• 通过JS或服务端限制字符数，会因文本差异导致表现不一致
• 使用text-overflow:ellipsis时，长标题的铅笔图标被隐藏
• 独立图标后，短标题时图标无法紧随标题末尾

期望实现：标题尽可能占满可用宽度，超长时显示省略号，铅笔图标始终紧随末尾可编辑。

原始代码 #

HTML #

<h2 class="link-title"><a href="#">Testing Title 2</a> <span class="edit" onclick="startEditLink(5)">✎</span></h2>

CSS #

.link-title {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
  margin: 0;
  max-height: 1.3rem;
  overflow: hidden;
}

解决方案 #

调整HTML结构 #

将标题内容单独封装在容器中，让图标作为独立元素始终处于标题右侧：

<h2 class="link-title">
  <span class="title-text"><a href="#">Testing Title That Is Way Too Long To Fit In The Available Space</a></span>
  <span class="edit" onclick="startEditLink(5)">✎</span>
</h2>

优化CSS #

利用Flex布局实现标题自适应宽度，配合文本省略属性达成需求：

.link-title {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit {
  margin-left: 0.5rem;
  cursor: pointer;
}

关键说明 #

• display:flex让标题文本与图标在同一行对齐，align-items:center保证二者垂直居中
• 标题文本容器设置flex:1，自动占据容器剩余可用宽度
• 组合overflow:hidden、text-overflow:ellipsis、white-space:nowrap实现长标题省略效果
• 图标设置固定左侧间距，短标题时紧随标题末尾，长标题时紧贴省略号右侧，始终保持可点击状态

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