javascript - css 和 jquery 缺少元素背景颜色

Question

我要设置元素的宽度。该元素将包含其中的任何文本但是，如果您将 div 标签宽度设置为小于 div 标签中无法换行的某个元素，则 div 标签将不会比该元素小基本上，它应该像普通的 html 元素一样工作它应该允许设置宽度，只要宽度不小于不会换行的宽度

http://jsbin.com/taxawopace/1/edit?html,output请检查一下如您所见，背景颜色丢失了。我该怎么办？谢谢

HTML/CSS:

  <div class="map-data-dialog" id="map-data-dialog" style="display: block; position: relative; z-index: 111111; border-color: rgb(23, 56, 14); width: 40px; color: rgb(1, 1, 1); left: 10px; top: 10px; background: rgb(218, 218, 218); padding: 12px;">
    <div class="map-data-box clearfix" style="font-family: arial; font-size: 18.3px; font-weight: 600; min-width: 40px;">
        <h3 class="map-title" style="font-family: arial; font-size: 18.3px; font-weight: 600;">test</h3>
        <div class="map-content" style="font-family: arial; font-size: 18.3px; font-weight: 600;"><div style="color: red; font-weight: 600; font-size: 18.3px; font-family: arial;">for testing method</div><p style="font-family: arial; font-size: 18.3px; font-weight: 600;">this is easy listenning for business</p></div>
    </div>
</div>

Answer 1

将 word-break:break-all; 添加到 div map-data-box，这样文本将分解以适合 div。