Chrome - 文字不在其元素边框内？

Question

所以我有一个JS函数，它会在文件预览容器上传到服务器后显示一个url。在Firefox上，如果文本太长而无法放在它上面的预览容器下面，它将换行到我想要的下一行。然而，在Chromium上，只要它需要，它就会延伸出来，并且会与其他东西重叠。 我怎样才能解决这个问题？我需要设置一些特定于webkit的东西吗？我尝试设置文本换行但它没有效果。

        this.on("success", function(file, responseText) {
        var span = document.createElement('span'); 
        var a = document.createElement('a');
        a.href = responseText;
        a.innerHTML = responseText;
        a.setAttribute('target', '_blank');
        a.setAttribute('link', 'color:#000000');
        span.appendChild(a);
        span.setAttribute("style", "position: absolute; box-sizing: border-box; 
            webkit-box-sizing: border-box; bottom: -28px; left: 3px; right: 3px;  
            height: 28px; line-height: 28px; text-color: #000000; "); 

        file.previewTemplate.appendChild(span);

        });
}

火狐：

铬：

编辑：我使用dropzone.js，父元素是预览容器，样式如下：

.dropzone .dz-preview,
.dropzone-previews .dz-preview {
 background: rgba(255,255,255,0.8);
 position: relative;
 display: inline-block;
 margin: 17px;
 vertical-align: top;
 border: 1px solid #acacac;
 padding: 6px 6px 6px 6px;
 width:100px;
 overflow: hidden;

}

Answer 1

解决它：通过在setAttribute中添加word-wrap: break-word;属性来修复。 在Firefox中看起来也不错。