浮动元素从 display:table 容器中的以下块元素“窃取”宽度

【问题标题】：Floated element "steals" width from a following block element inside a display:table container浮动元素从 display:table 容器中的以下块元素“窃取”宽度
【发布时间】：2021-03-05 23:40:52
【问题描述】：

我有一个 div 用display:table; margin:auto;（绿色框）“浮动”到中心

在其中，我有一个float:left 元素（红色框，并不总是存在），然后是一些display:block;“线条”（石灰框）。该应用程序是带有首字母缩进和反向缩进的诗歌格式：

https://jsfiddle.net/nktj94gd/2/

问题是浮动的“L”从石灰块“窃取”了它自己的宽度，而不是让外部块（绿色）膨胀以防止石灰线在不必要时缠绕。

我真的很想避免在不需要时换行，但我无法设置整个框的宽度（可能从几个 em 到 100%）。有没有办法实现这个？

【问题讨论】：

标签： html css word-wrap drop-cap

【解决方案1】：

我会在里面使用一个额外的包装器，考虑到 L 的宽度，我会稍微大一些

.outer {
  display: table;
  margin: auto;
  overflow:auto;
  outline: 1px solid green;
}
.outer > div {
  width:calc(100% + 2.8em); /* 2.8em is an approximation of L width */
  transform:translateX(-1.4em); /* rectify the centring */
}
.dropcap {
  float: left;
}

.dropcap-inner {
  font-size: 4em;
  line-height: 1em;
  margin-right: 1em;
  border: 1px solid red;
}

.line {
  display: block;
  text-indent: -4em;
  margin-left: 4em;
  border: 1px solid lime;
}

<div class="outer">
  <div>
    <span class="dropcap"><span class="dropcap-inner">L</span></span>
    <span class="line">orem ipusm dolor sit amet</span>
    <span class="line">Lorem ipusm dolor sit amet dddd</span>
  </div>
</div>

【讨论】：

令人讨厌的是，首字下沉既是可选的，也可以是任意大小（甚至是图像）。有什么方法可以不依赖帽子的大小吗？