css - 显示内联元素并自动换行

Question

我正在尝试将三个 div 内联排列在一起。最后一个 div 的内容中可能有一个很长的第一个单词，当它出现时，它会换行到下一行。我希望它保留在第一行并换行。

我有以下内容:

#container {
  width: 300px;
  display: inline-block;
}

#text1 {
  outline: 1px solid red;
  display: inline;
  margin-right: 5px;
}

#text2 {
  outline: 1px solid red;
  display: inline;
  margin-right: 5px;
}

#title-container {
  outline: 1px solid red;
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
}

#title {
  white-space: pre-wrap;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
  -ms-word-break: break-word;
}

<div id="container">
  <div id="text1">
    Text1
  </div>
  <div id="text2">
    12345
  </div>
  <div id="title-container">
    <span id="title">verryyyyyyyyyyyyyyyyyyyyyyyyyyyrrrrrrrrrrryyyyyyyyyyyyyy long title</span>
  </div>
</div>

这是一个演示问题的 fiddle 。

https://jsfiddle.net/wzm3h6u6/

这里正确的修复是什么？

Answer 1

只需将 word-break: break-all; css 添加到 #title-container

#container {
  width: 300px;
  display: inline-block;
}

#text1 {
  outline: 1px solid red;
  display: inline;
  margin-right: 5px;
}

#text2 {
  outline: 1px solid red;
  display: inline;
  margin-right: 5px;
}

#title-container {
  outline: 1px solid red;
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

#title {
  white-space: pre-wrap;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
  -ms-word-break: break-word;
}

<div id="container">
  <div id="text1">
    Text1
  </div>
  <div id="text2">
    12345
  </div>
  <div id="title-container">
    <span id="title">verryyyyyyyyyyyyyyyyyyyyyyyyyyyrrrrrrrrrrryyyyyyyyyyyyyy long title</span>
  </div>
</div>