在 Chrome 43 中，文本偶尔会超出 div

Question

我有一个基本块（紫色），里面有一些可变长度的文本。 div 是相对位置的，也是响应式的，因此它的宽度等以 % 为单位。

我们的一些用户在 Chrome 最新版 (v43.0.2357.65) 和 WinXP 上看到文本溢出到紫色框的边缘。这是一时兴起的，因此很难重现。我正在尝试修复 CSS，以便文本不会溢出。我在包含文本的 div 上也有一个 max-width 和 break-word 属性。

该网站是荷兰语。

<div class="mt-landing__section-notification">
<div class="mt-landing__section-notification__info-icon icon-info"></div>
                <div class="mt-landing__section-notification__close-icon"></div>
                <div class="mt-landing__section-notification__content">
                    <div class="mt-landing__section-notification__message">
                        This is where the text is. 
                    </div>
                </div>
            </div>

这是最外层 div 上的 CSS 和包含文本的那个：

.mt-landing__section-notification {
    z-index: 1;
    width: 64.5%;
    background-color: #411E4E;
    padding: 20px;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 0px;
    display: block;
}
 .mt-landing__section-notification__message {
     line-height: 24px;
     margin-top: -3px;
     word-wrap: break-word;
     max-width: 100%;
}
 .mt-landing__section-notification__content {
     margin: 0px 50px; 
  }
  .mt-landing__section-notification__info-icon {
       width: 50px;
       float: left;
       font-size: 24px;
  }
  .info-icon {
      font-family: mt-icons;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
   }
   .info-icon::before {
        content: '\e617';
    }

任何想法为什么文本溢出？

Answer 1

看起来你的信息图标可能是这里的罪魁祸首。

要么 a) 将图标设置为position:absolute，将容器设置为position:relative，这会将图标从流中取出，因此不会将文本推到右侧，

或 b) 也许使用图标作为背景图像。只需增加容器的padding-left 并将其添加为背景图像。我发现这是保持秩序井然的最简单方法，同时仍然灵活且响应迅速：

https://jsfiddle.net/svArtist/s3xc3nro/

.mt-landing__section-notification {
    z-index: 1;
    width: 64.5%;
    padding: 20px;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 0px;
    display: block;
}
.mt-landing__section-notification__message {
    line-height: 24px;
    margin-top: -3px;
    word-wrap: break-word;
    max-width: 100%;
}

.icon-info{
background: url(http://www.grafik-wunder.de/klafo/images/info.png)  #411E4E no-repeat 10px center;
    padding-left: 50px;
    min-height: 50px;
    box-sizing:border-box;
}

<div class="mt-landing__section-notification  icon-info">
    <div class="mt-landing__section-notification__close-icon"></div>
    <div class="mt-landing__section-notification__content">
        <div class="mt-landing__section-notification__message">This is where the text is.</div>
    </div>
</div>