我试图在线显示两个元素。第一个元素是普通元素，第二个元素是锚标记。如果锚标签文本长度超过可用空间，我希望它包装下一行，最好不要在它们之间打破单词。
但是当我尝试破解词时，我无法实现内联式。
当文本的长度超过当前行时，锚点只会移动到下一行。我要显示的示例方式是：
|||你好Mannnnnnnnn |||
||| nnnnnnnnnnnnnnnnn |||
.parent {
// display : flex;
//display : inline;
}
.first {
display: inline;
}
.second {
display: inline;
max-width: fill-available;
word-wrap: break-word;
}<div class="parent">
<div class="first">
Hello
</div>
<div class="second">
<a href="#">ManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManMan</a>
</div>
</div>`
以下codepen有代码
http://codepen.io/anon/pen/GqrJmo
我试图做flexbox风格，但情况更糟。以下codepen有display:flex
答案 0 :(得分：4)
1。）不要使用DIV，而是span s（默认为内联）。
2。）只需将其全部放入一个DIV中，无需任何特殊设置（也可能只是p标签） - 我从原始代码中删除了很多
3。）在第一个单词和第二个单词之间留出空格 - （不间断空格）
4.。）由于您可能不希望同一容器中的后续单词中断，请将第一个单词和链接包含<span>标记，并将word-wrap: break-word;分配给.x {
word-wrap: break-word;
}而不是整个容器/ DIV。
5.）其余的，请参阅我的代码段
<div>
<span class="x">Hello <a href="#">ManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManMan</a>
</span> and some more bla bla bla bla bla bla blab bla bla bla bla bla bla bla bla bla bla
</div>gameLoop
答案 1 :(得分：0)
我看到的唯一“好”解决方案是使用零宽度空格（​）的解决方法，在每个几个字符（理想情况下一个）之后插入链接的文本（不是网址，只是文本） javascript或服务器端。
.parent {
display : inline;
}
.first {
display: inline;
}
.second {
display: inline;
max-width: fill-available;
word-wrap: break-word;
}<div class="parent">
<div class="first">
Hello
</div>
<div class="second">
<a href="#">Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man​Man</a>
</div>
</div>`
不是一个好的解决方案，但我无法想象更好的事情。
另一种解决方案是将white-space: nowrap;样式添加到.first元素（或使用 ），然后删除.first和{{1}之间的任何空格和换行符源代码html中的元素。
.second.parent{
display : inline;
}
.first{
display : inline;
white-space: nowrap;
}
.second{
display : inline;
word-wrap: break-word;
}