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

Answer 2

Eric建议“破解词”是好的，但它不是跨浏览器兼容的。

统计上，大多数使用过的单词少于14个字符。因此，即使浏览器不符合“break-word”属性，我通常采取的措施是保持设计良好，选择在可用空间中显示14个字符的字体大小。并使用属性“overflow：hidden”隐藏超过14个字符的单词中的额外字符。

另一种不推荐和不干净的方法是在JS中创建一个函数，通过在长度超过14个字符的单词中添加空格来渲染单词。

Answer 3

我无法找到问题的css解决方案，所以这是我的javascript解决方案：

/**
 * Adjust the widths of each icon div to be as wide as the longest unbroken word
 */
function adjustIconWidths() {
   $("div.icon").each(function(){

    var width = $(this).width();
    var starting = width;
    $("span",this).each(function(){
        var tmp = $(this).width();
        if(tmp > width){
           width = tmp;
        }
    })
    if(width != starting){
        $(this).width(width);
    }

  });
}

将div宽度包装到内容中，但也将内容包装在某一点

3 个答案: