Html 为什么可以'；我不能把这个跨度包好吗？

在下面的HTML（）中，文本“Why won't this text wrap”仅在宽度太小以至于已经开始剪切部分文本时才进行换行。然后包起来

注意，我想要的行为是将包含文本的块包装为单个项目，而不是将文本开始逐字包装。请注意，它实际上是起作用的，但只有当宽度足够小，以至于在没有前导图像的情况下它才会被包装时，它才起作用。如果删除前导图像，它将按预期工作

有没有一种方法可以让我在头像就位的情况下获得所需的包装行为

#主工具栏{
高度：140像素；
空白：nowrap；
溢出：隐藏；
宽度：100%；
}
#主工具栏文本{
高度：初始高度；
显示：内联块；
颜色：#2196f3；
线高：70px；
}
.测试{
边框：纯红1px；
}
.profile工具栏用户文字标记{
显示：内联块；
空白：正常；
溢出：初始值；
}
.配置文件工具栏文字标记{
宽度：90px；
}
.配置文件工具栏图标{
宽度：90px；
}
.配置文件工具栏图标{
显示：内联块；
垂直对齐：顶部；
溢出：可见；
空白：nowrap；
}

为什么这个文本不换行？

这里最简单的解决方案是使用

display:flex

。这是一个例子。在使用flex之前，您应该了解它是如何工作的，因为它具有许多不同于块显示和内联显示的内置行为

如果您不想使用flex和/或只是想知道为什么会发生此问题，请继续阅读：

由于您没有在包含文本的块上设置任何宽度（或最小/最大宽度），并且它使用的是

display:inline block

，因此块的宽度隐式为100%。由于前导图像的宽度为90px，因此将包含文本的块向右偏移90px

基本上，前导图像+包含文本的块所占的宽度实际上等于100%+90px，因此浏览器认为在包装包含文本的块之前还有额外的90px空间，实际上，额外的90px被剪裁，因为它超过了外部div的100%宽度。这就是为什么只有当宽度足够小，以至于在没有前导图像的情况下，包装才会起作用

因此，要解决这个问题（没有flex），您可以设置

max width

以减去前导图像的额外宽度，在本例中为90px：

.profile-toolbar-user-wordmark {
    display: inline-block;
    white-space: normal;
    overflow: initial;
    max-width: calc(100% - 90px); /* 90px in this case, in general it should be whatever the width of the leading image is */
}

一个微妙的警告是：根据前导图像周围是否有边框/边距/填充，您可能需要调整减去的宽度来说明这一点。也就是说，如果前导图像的右边距为8px，则需要将

max width

设置为

calc（100%-98px）

。如果前导图像的边距右侧为8px，左侧为8px，

max width

需要为

calc（100%-106px）

。左/右边框、边距和填充都会影响这一点

由于上述原因，您可能会注意到，在您的情况下，

max width

设置为

calc（100%-90px）

，当您在文本开始换行之前调整大小时，仍然会出现一点剪裁（几个像素值）。这是因为您应用了红色边框，它添加了2px（左侧1px，右侧1px），以及前导图像和包含文本的块之间的空间（由代码中两个跨距之间的换行引起）。不幸的是，没有很好的方法知道空格字符的宽度，因为它随浏览器和字体大小而变化。因此，要使包装达到像素完美，您需要将

max width

设置为

calc（100%-92px）

并删除空间（有多种方法可以实现）。如果仍然需要元素之间的空白区域，则可以设置边距（只需记住在

max width

calc中考虑该边距）

最后：如果不使用flex或上面的硬编码CSS，如果确实需要，您可以使用JQuery动态设置CSS（即，如果您无法硬编码前导图像元素的宽度，或者如果您确实不想去掉该空间）：

。。。
让$yourElement=$（“#您的id”）；
让offsetLeft=$yourElement.offset（）.left-$yourElement.parent（）.offset（）.left；
$yourElement.css（“最大宽度”`calc（100%-${offsetLeft}px）`）；

我尝试了很多次，但没有找到HTML的解决方案

但是，如果您可以更改HTML结构，则可以使用flexbox（es）实现所需的结果：

#主工具栏{
显示器：flex；
对齐项目：开始；
最小高度：90px；
宽度：100%；
}
.测试{
边框：纯红1px；
}
.配置文件工具栏文字标记，
.配置文件工具栏图标{
宽度：90px；
高度：90px；
右边距：5px；
弹性：0 0首字母；
}
.好的{
显示器：flex；
对齐项目：居中；
柔性包装：包装；
}
#主工具栏文本{
显示：内联块；
颜色：#2196f3；
}

为什么这个文本不换行？

问得好。我不知道原因，也不知道解决方案，但这里有一个解决方法：给文本块（主工具栏文本）添加一个正确的填充，这样它的容器就会认为它比实际的要宽，并且它会更快地包装。94px应该足够了；第一个图标的宽度加上中间空间的宽度。如果删除

空白：nowrap它将按预期换行。@这将使“配置文件工具栏用户文字标记”类元素换行到“配置文件工具栏图标”元素下面。我不知道该包装什么。我希望文本在“profile toolbar user wordmark”元素中的图像下方进行换行，而不必对该元素本身进行换行。我建议改用flexbox或css table-我非常感谢所有的答案，很多答案都适用于这种情况。我
<span id="your-id" class="profile-toolbar-user-wordmark test">...</span>

let $yourElement = $("#your-id");
let offsetLeft = $yourElement.offset().left - $yourElement.parent().offset().left;
$yourElement.css("max-width", `calc(100% - ${offsetLeft}px)`);