在创建响应式网页设计时，经常会出现一个单字词作为段落行的最后一个字。
This is a
paragraph
我想将这样一个单字词移动到如下位置。
This is
a paragraph
在CSS中有没有内置的属性可以实现这种效果？如果没有，如何在JavaScript中实现？
为了让单字母词（如'a'或'I'）与下面的词保持在同一行，你可以用不间断的Unicode字符来替换它们之间的空格字符 \u00A0.
这可以通过一个小的JavaScript来自动完成。例如，这段代码替换了 [space][letter][space] 与 [space][letter][non-breaking space]:
const modifySingleChars = str => str.replace(/ ([a-zA-Z]) /g,
' $1' + '\u00A0');
要改变一个页面上的所有实例，首先要收集正文中的所有文本节点（跳过正文中的任何一个节点）。<script> 标签。
然后简单地迭代文本节点，进行适当的替换。
一个可行的例子。
// form array of all text nodes in parentNode
function allTextNodes(parentNode) {
let arr = [];
if (!parentNode) {
return arr;
}
let nodes = parentNode.childNodes;
nodes.forEach(node => {
if (node.nodeName === 'SCRIPT') {
return;
}
if (node.nodeType === Node.TEXT_NODE) {
arr.push(node);
} else {
arr = arr.concat(allTextNodes(node));
}
});
return arr;
}
// convert [space][letter][space] to [space][letter][non-breaking space];
const modifySingleCharWords = str => str.replace(/ ([a-zA-Z]) /g,
' $1' + '\u00A0');
function fixAllSingleCharWordsInBody() {
let tNodes = allTextNodes(document.body);
tNodes.forEach(tNode => {
tNode.nodeValue = modifySingleCharWords(tNode.nodeValue);
});
}<body>
<div id="wrapper" style="width:20rem">
<h4>Prevent single character words at end of line</h4>
<button type="button" onclick="fixAllSingleCharWordsInBody();">Fix All Words
</button>
<p>Lorem ipsum dolor i amet, consectetur a dipiscing elit, sed o eiusmod tempor incididunt u labore et dolore magna aliqua. <span>Nisl purus i mollis</span> nunc.
</p>
<p>In vitae turpis massa e elementum tempusus a sed. Eget mi proin e libero enim i faucibus. Quis lectus nulla a volutpat diam ut.
</p>
<p>Pharetra e ultrices neque ornare. Donec a tristique risus e feugiat in fermentum. Consectetur adipiscing e u aliquam purus sit amet.
</p>
<p>Vitae congue mauris rhoncus aenean e elit scelerisque mauris pellentesque. Mauris u eros i cursus turpis a tincidunt dui.
</p>
<p>At volutpat diam u venenatis tellus. Tellus integer feugiat scelerisque varius morbi i nunc faucibus at.</p>
<script>
const b = 'Do not modify anything inside a script tag';
</script>
</div>
</body>如果你想让 "a "和 "paragraph "始终保持在一起，就在它们之间加一个 "非分隔空间"。
<div style="width:100px;border:1px solid #333;padding:5px">
<p>
This is a paragraph
</p>
</div>