Question

我有以下标记（好吧，真实标记的repro案例）：

<!DOCTYPE html>
<html>
<head>
    <title>Wrapping Woes</title>
    <style>
      .button {
        border: 1px solid black;
        background: #CCFFCC;
        min-width: 40px;
        max-width: 80px;
        height: 80px;
        display: inline-block;
        text-align: center;
        vertical-align: top;
      }
      .button:hover {
        background: #CCCCFF;
      }
    </style>
  </head>
  <body>          
    <span class="button">
      Lorem Ipsum
    </span>
    <span class="button">
      Dolor
    </span>   
    <span class="button">
      Set Amet
    </span>  
</body>
</html>

按钮内容已生成且未知。我的问题主要是“Lorem Ipsum”按钮 - 尽管它已经包装，它仍然占据了最大宽度（80px），理想情况下我希望它缩小到单词的宽度。这实际上是IE7标准模式中的行为，但在IE8模式或任何符合标准的浏览器中似乎不是这样。

我尝试了width: 1px;，但这也导致“Set Amet”也被包裹。

如何使元素宽度取决于包装文本，而不是预先包装的文本？

Answer 1

我最终做了一些服务器端包装。我只想要包装到最多2行，所以在标记中手动换行会产生所需的结果。似乎只能在css中使用。

基本上，如果文本超过12个字符，我用新行替换最中间的空格。不完美，但它运作良好。

Word将强制元素包装到最大宽度

1 个答案: