显示带有自动换行的内联元素

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>

这是一个证明问题的小提琴。

https://jsfiddle.net/wzm3h6u6/

这里的正确解决方法是什么？

Answer 1

要执行此操作，您需要为＃title-container div添加一个宽度，以便它知道要保留哪个宽度而不是由其内容确定。

自动换行：break-word;包装文本。 display：inline-block; 最后纵向对齐：顶部与容器顶部对齐。

#title-container {
  outline: 1px solid red;
  display: inline-block;
  width: 40px;
  word-wrap: break-word;
  vertical-align: top;
}

请参阅小提琴here

Answer 2

只需将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>