html - 具有最大宽度的 div 始终适合内容的宽度

Question

看看这个jsfiddle：http: //jsfiddle.net/tN6QE/2/

我们有 CSS

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

有两种情况。当内容的宽度小于 200px 时，div 将调整大小以适应内容，最后一个单词和右边框之间正好有 10px。

当内容大于 200px时，即使自动换行语句的宽度小于 200px ，div 的宽度也会一直保持在 200px。也就是在 div 内最突出的单词距离右边框大于等于 10px。我想要的是调整 div 的大小，使其在最右边的单词和边框之间总是正好 10px （同时保持max-width和文本左对齐）。

我尝试过使用word-wrap,word-break和white-space. 提供width属性将不起作用，因为max-width它将覆盖它。

有任何想法吗？这甚至可能吗？谢谢！

Answer 1

用解决方案检查这个小提琴

div {
    display: inline-block;
    border: solid 1px black;
    padding: 10px;
    max-width: 200px;
    text-align:justify;    
}
div:after{
    content: "";
    display: inline-block;
    width: 100%;
}