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 override it。

有什么想法吗？这甚至可能吗？谢谢！

Answer 1

使用Solution

检查这个小提琴

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

最大宽度的div总是适合宽松的内容

1 个答案: