html - 将 div 宽度包装到内容，但也在特定点包装内容

Question

也许这是要求吃我的蛋糕，但我认为我已接近解决方案，只需要一点帮助。我进行了大量谷歌搜索，但未能准确找到我要查找的内容。

我正在创建一个可点击的图标来激活页面上的一些 javascript。可以有多个图标，图标上的文字由用户提供。我将图标换行到 55px，这将使文本正确地换行，但如果有一个单词超出 55px，它将超出包含的 div。

我有相关代码的模型

HTML:

<div class="outer">
    <div class="inner">
         <a>
             <img src="chronometer.png" height=32px width=32px />
             <div class="text">Superawesomethingymabob</div>
         </a>
    </div>
</div>

CSS:

div.outer {
     border: 1px solid blue;
     background-color: cyan;
     float:left;
     text-align: center;
}
div.inner {
     border: 1px solid red;
     width:55px;
}
div.text {
     background-color:yellow;
     width:auto;
}
a {
     display:inline-block;
}

所以基本上我正在做的是我有一个固定宽度的内部 div，这样文本就会换行。外部 div 向左浮动，因此它会收缩包装到它的内容中。问题是外部 div 将收缩包装到内部 div 的宽度，而不是超出内部 div 的文本的宽度。

如有任何帮助或建议，我们将不胜感激并奖励 500 个互联网。我对标记或 CSS 很灵活，我只想要跨浏览器兼容的东西。

提前致谢。

Answer 1

尝试使用 word-wrap: break-word