如何使用包装文本的确切宽度而不是完整容器的宽度？

Question

我有一些约束到特定宽度的文本，所以它包装。我想在包装文字周围显示边框。当我添加边框时，它会包装文本以及周围未使用的空间。有没有办法将边框应用于只是文本？这是我的意思的说明：我画了一条红线，我想要元素的右边缘：

HTML：

  <div>
    Supercalifragilistic expialidocious
  </div>

CSS：

div {
  max-width: 200px;
  display: inline-block;
  border: 1px solid black;
}

JSFiddle

Answer 1

可以用于短文本。结合attr()和pseudo。

.outer {
  width: 200px;
  background-color: #ccc;  
  border: 1px solid black;
  display: inline-block;
}
.inner {      
  display: inline;
  position:relative;
}
.inner:before {
  content: attr(data-text) " ";
  color: transparent;
  position: absolute;
  left:0;top:0;
  border: 1px solid red;
  pointer-events: none;
}

<div class="outer">
  <div class="inner" data-text="Supercalifragilistic expialidocious">Supercalifragilistic expialidocious</div>
</div>

编辑：内联元素内的绝对定位＆amp;上述示例的限制。

  

From CSS2.1 specs 10.1.4：如果一个元素绝对位于跨越多行的内联元素内，则其包含的块是未定义的。

通过定义顶部和左侧位置，我们让浏览器将pseudo与其“祖先”创建的第一个框的相应顶部和左侧边缘对齐。根据定义，pseudo是任何所选元素的虚拟子元素，absolute查找最近的祖先。虽然内联规则指向不包含块，但位置规则有利于顶部/左侧。

然后我们允许伪取其内容/内在维度计算的高度。由于attr()提取相同的内容，因此它或多或少地重叠在其祖先的文本上。 （when without any font inconsistencies）。

但请注意，虽然它可能适用于单行文本，但它依赖于white-space / wrap / font，并且在处理多行内联元素时在浏览器中不一致。

这就是我的意思。

.outer {
  width: 200px;
  background-color: #ccc;
  border: 1px solid black;
  margin-bottom: 30px;
  font-family: monospace;
}
.inner {
  color: black;
  position: relative;
}
.inner:after {
  content: attr(data-text) " ";  
  position: absolute;
  left:-1px;top:-1px;right:-1px; /* compensating for the border */
  pointer-events: none;
  color: transparent;
  border: 1px solid red;
}

<div class="outer"><span class="inner" data-text="single line inline">single line inline</span></div><div class="outer"><span class="inner" data-text="This is a multi-line inline element which may not hold an absolute positioned pseudo element. Fails in Chrome.">This is a multi-line inline element which may not hold an absolute positioned pseudo element. Fails in Chrome.</span></div>