如何保持多行跨度与内容的宽度相同？ [复制]答案

【问题标题】：How can I keep a multi-line span the same width as the content? [duplicate]如何保持多行跨度与内容的宽度相同？ [复制]
【发布时间】：2021-04-27 18:24:32
【问题描述】：

我有一个内部有 2 个跨度的 div。如果第一个跨度内容足够短以显示在单行上，则跨度宽度（在开发工具中）与文本内容的宽度相同。这会将第二个跨度直接定位在第一个跨度的右侧。

如果第一个 span 的内容足够长以使其包裹 span 的宽度，则它会大于内容的宽度。意味着在换行的文本之后有额外的空间。它强制第二个 span 与父 div 的右边框对齐，第一个 span 的宽度取剩余的宽度。

有没有办法让多行跨度的宽度与单行跨度的行为相同？浏览器可以将多行文本包裹在任何它想要的地方。

我添加了一张图片，显示了我正在尝试做的事情。我希望第二个跨度始终位于框的右边缘，该框的宽度刚好足以包含文本。在多行第一个跨度上，宽度将足以包含发生换行后所需的最长行。就像图像中的第三个示例一样。在换行完成后，我可以通过手动指定多行跨度的宽度来做到这一点。我不想指定宽度，因为这将基于文本随机。

div{
border:solid 1px green;}

<div style="width: 500px; height: 150px; display: flex">
  <span id="span1">kljlkajdl aldf di alkd falk afldin laknd flaid flkna dlfin laind flina ldf</span>
  <span id="span2">ABC</span>
</div>

<div style="width: 500px; height: 150px; ">
  <span id="span3">kljlkajdl aldkjf di alkd falk afldin laknd flaid flkna dlfinu lainduyvgcrdrses flina ldfina ldsfialdknfa dfoin a</span>
  <span id="span4">ABC</span>
</div>

【问题讨论】：

要么从父级中移除 flex，要么将两个 span 包裹在另一个 span、p 或 div 中
我希望结果是 2 个跨度是顶部对齐的，因此第二个跨度将正好位于第一个跨度的右侧，但两者都具有相同的顶部对齐方式。随着第一个跨度的增长，第一个跨度可以根据其包裹方式改变宽度，但第二个跨度应该始终位于第一个跨度的右侧。 2个跨度或多或少是列。根据其他反馈，我认为这是不可能的。我可以尝试使用表格或类似元素，看看是否可行。我只是不想在父 div 内的任何东西上加硬宽度。
试了表，同样的问题出现了。从阅读一些响应看来，包装是在已经计算出包含元素的宽度之后发生的。似乎不可能是纯 css 解决方案。
不知道你想做什么。你能提供一些你想要的图片吗？我为您的问题添加了边框。看一下：第二个跨度要放在哪里？
我添加了一张图片和一些描述。

标签： javascript html css flexbox

【解决方案1】：

从其父级中删除flex？

div {
  border: solid 1px green;
}

<div style="width: 500px; height: 150px; display: flex">
  <span id="span1">kljlkajdl aldf di alkd falk afldin laknd flaid flkna dlfin laind flina ldf</span>
  <span id="span2">ABC</span>
</div>

<div style="width: 500px; height: 150px; /*display: flex*/">
  <span id="span3">kljlkajdl aldkjf di alkd falk afldin laknd flaid flkna dlfinu lainduyvgcrdrses flina ldfina ldsfialdknfa dfoin a</span>
  <span id="span4">ABC</span>
</div>

【讨论】：

不知道为什么有人会投反对票