跨浏览器方式，保留长文本以中断，但保留具有垂直对齐图像的单词

Question

不确定这个问题是否被问过，但我不想在中间删减任何单词，除非单词太长而无法容纳在一行中。我通常可以用 word-wrap:break-word 做到这一点，但就我而言，我在文本的开头有一个小图像，它是垂直对齐的，如果一个单词太长而无法容纳在一行中，它会插入换行符。

http://jsfiddle.net/y2mps278/

如何删除换行符？我尝试使用white-space，但我什么也得不到。 word-break: break-all可以删除换行符，但它会在中间删除正常的单词。如有必要，可以为我更改 HTML 结构。

我需要这个在IE11和最新版本的Chrome和Firefox上工作。

Answer 1

在我看来

，这不是一个内容图像......这是造型。

在这种情况下，我们应该将其推送到 CSS 并将其用作背景图像

div {
  width: 150px;
  outline: 1px solid black;
  word-wrap: break-word;
}
span {
  vertical-align: middle;
  padding-left: 24px;
  background-image: url(http://lorempixel.com/output/abstract-q-c-24-24-6.jpg);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 24px 24;
}

<div>
  <span>ThisIsAVeryLongSentenceWithNoSpacesDoesItRenderCorrectly?</span>
</div>
<div>
   
    <span>This On the Other Hand, is A Very Long Sentence With Spaces. Does It Render Correctly?</span>
</div>