Html 我可以阻止两个单词分成单独的行并创建孤儿吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7532826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I stop two words from breaking onto separate lines and creating an orphan?
提问by jkupczak
I have a paragraph that ends with a link that contains the two word phrase "Read More". I'd like these two words to always be displayed on the same line. Right now, if the "More" can't fit on the same line, it gets bumped to the next line by itself.
我有一个以包含两个词短语“阅读更多”的链接结尾的段落。我希望这两个词始终显示在同一行上。现在，如果“更多”不能放在同一行上，它会自己撞到下一行。
Is there any CSS that will stop "Read More" from breaking onto separate lines?
是否有任何 CSS 可以阻止“阅读更多”分成单独的行？
回答by Anson
There's a <nobr>tag in HTML that will do this, but it's deprecated. This pagesuggests using white-space:nowrapinstead.
<nobr>HTML 中有一个标签可以做到这一点，但它已被弃用。此页面建议使用white-space:nowrap代替。
white-spaceis defined in the CSS1 specification and should be supported by all major browers.
空白在 CSS1 规范中定义，所有主要浏览器都应支持。
回答by Vasiliy Faronov
You can also place the non-breaking space between the two words:
您还可以在两个单词之间放置不间断空格：
Read More
although arguably this muddies HTML with presentation matters.
尽管可以说这使 HTML 与演示很重要。
回答by Samich
<a href='#' class="my-readmore-css-class">Read more</a>
.my-readmore-css-class { white-space:nowrap; } // it should be style for your "Read more"
