HTML双组件同行row布局文本溢出从整行左侧换行方案咨询

实现方案 #

要实现标签旁文字换行后从最左侧开始的环绕效果，最简洁兼容的方式是使用float属性，代码示例如下：

1. HTML结构 #

<div class="content-wrap">
  <span class="live-tag">Live</span>
  <span class="title">South Africa vs Pakistan, 2nd ODI: SA win by 12 runs, go 2-0 up in three-match series</span>
</div>

2. CSS样式 #

.live-tag {
  float: left;
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #1677ff;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
}
.title {
  line-height: 1.8;
}
/* 父容器清除浮动，避免高度塌陷 */
.content-wrap::after {
  content: "";
  display: block;
  clear: both;
}

补充说明 #

• 核心原理是给Live标签设置float: left后，标签会脱离常规文档流向左靠齐，后续的文本内容会自动环绕在标签右侧，换行时自然从父容器最左侧开始，完全符合需求的排版效果。
• 该方案兼容所有主流浏览器，无需额外依赖。如果需要限制标题最多显示行数，可在.title样式中追加多行省略配置，不影响环绕效果：

.title {
  line-height: 1.8;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 可自定义最多显示行数 */
  -webkit-box-orient: vertical;
}

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