内联块div不会缩小到内容 [英] Inline-block div not shrinking to content

问题描述

我正在使用jQuery在我的布局中插入一些包含文本的div.我已经用display: inline-block设置了div的样式，并且希望div收缩"它们的内容.在大多数情况下，这似乎是可行的，但我遇到了一种情况，其中文本换行到了下一行，但div在右侧留下了一堆额外的填充.我正在使用Chrome版本53.0.2785.143 m.

I am using jQuery to insert some divs containing text into my layout. I have styled the divs with display: inline-block and I want the divs to "shrink-wrap" their content. This seems to be working in most cases but I've come across one case where the text wraps to the next line but the div leaves a bunch of extra padding on the right side. I'm using Chrome Version 53.0.2785.143 m.

这是我的CSS和标记的精简版本.第一个框显示了我正在描述的内容，第二个框显示了我期望的外观(我通过明确声明宽度来实现).或者，您可以在jsfiddle上查看它: https://jsfiddle.net/3rakaLxc/

Here is a stripped down version of my css and markup. The first box shows what I am describing, the second shows how I expect it to look (which I achieved by explicitly declaring a width). Or you can view it here at jsfiddle: https://jsfiddle.net/3rakaLxc/

[data-station-display] {
  border: 1px solid #000000;
  width: 490px;
  height: 367px;
  background-color: #e0e0ee;
}

.stationOverlay {
  position: absolute;
  left: 0;
  top: 0;
}

[data-station-display] .textbox-border {
  display: inline-block;
  margin: auto;
  border-radius: 4px;
  padding: 2px;
  background: #B7B7B7;
  background: linear-gradient(to bottom, #FFFFFF 0%, #808080 100%);
}

[data-station-display] .textbox {
  display: inline-block;
  max-width: 245px;
  padding: 1px;
  border-radius: 4px;
  font-family: verdana, tahoma, Arial;
  font-size: 9.5px;
  font-weight: bold;
  opacity: 0.6;
  cursor: default;
}

<div data-station-display style="position:relative;">
  <div class="stationOverlay textbox-border" data-stationid="6" style="top: 337px; left: 0px;">
    <div class="textbox yellow" >Station Format: Obstacle Course/Private Lesson</div>
  </div>
</div>
<p>
How I think it should look:
</p>
<div data-station-display style="position:relative;">
  <div class="stationOverlay textbox-border" data-stationid="6" style="top: 337px; left: 0px;">
    <div class="textbox yellow" style="width:218px;">Station Format: Obstacle Course/Private Lesson</div>
  </div>
</div>

如何消除私人"一词右边的多余空间?

How can I get rid of the extra space to the right of the word "private"?

推荐答案

这是一个有趣的问题.

请考虑以下简化示例.

我有一个内联块元素.textbox，其max-width为300px， 设计用于强制文字换行.

I have an inline-block element .textbox with a max-width of 300px, designed to force the text to wrap.

在第一行中，我添加了white-space: nowrap，以将文本保留在一行中，并强制其从元素中溢出.

In the first line, I added a white-space: nowrap to keep the text on a single line and to force it to overflow out of the element.

如果运行以下代码段，则应看到第二个框的右边缘与单词"onto"重合，因此浏览器中的文本流算法将强制以"onto"开头的文本流入如预期的那样，第二行.

If you run the snippet below, you should see that the right edge of the second box coincides with the word "onto", so the text flow algorithm in the browser will force the text, starting with "onto" to flow into the second line, as expected.

现在，正如您所指出的，在前一个单词("wraaaa .... ap")的右边留有空白.该空间对应于单词"onto"的长度，直至包含元素的最大宽度.

Now, as you noted, there is white space left over to the right of the preceding word ("wraaaa....ap"). This space corresponds to the length of the word "onto" up to the max-width of the containing element.

浏览器不会计算将要流到第二行的字符串/单词留下的空白量，因此，它将.textbox的宽度保留为max-width定义的值.

Browsers do not compute the amount of white space left by the string/word that is about to flow onto the second line, therefore, it leaves the width of the .textbox to the value defined by max-width.

因此，这说明了额外空间是如何产生的.但是，无法使用CSS强制浏览器退格"并消除右侧的空白.

So, this demonstrates how the extra space originates. However, there is no way using CSS of forcing the browser to "backspace" and eliminate the hanging white space to the right.

付出更多的努力，您也许可以提出一个JavaScript/jQuery修复程序，但这将是一个不同的练习，也许社区中的其他成员可能会寻求进一步的答案.

With a lot more effort, you might be able to come up with a JavaScript/jQuery fix, but that would be a different exercise, which perhaps some other member of the community may pursue to further the answer along.

我还应该注意，在Firefox中也会出现相同的问题.

I should also note the the same problem arises in Firefox.

此外，如果尝试显示table-cell和table和inline-table，也会显示相同的效果.

Furthermore, the same effect manifests itself if you try display table-cell and table and inline-table.

.textbox {
  outline: 1px dotted gray;
  display: inline-block;
  max-width: 300px;
  margin: 2px 0; /* for demo only */
}
.textbox.fix {
  white-space: nowrap;
}

<div class="textbox fix">Some words that can wraaaaaaaaaaaaaaaap onto a second line as needed.</div>
<br>
<div class="textbox">Some words that can wraaaaaaaaaaaaaaaap onto a second line as needed.</div>

这篇关于内联块div不会缩小到内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！