将一个字母单词移动到下一行

Question

我有一个响应式网页。是否可以将行尾的一个字母单词自动移动到下一行

示例：

一图值
一千字。

而不是：

一图抵一
千字。

Answer 1

有可能，是的。一种方法是使用 textContent.replace(/( \S) /g, "\n") 和 CSS 属性 white-space: pre-line。请注意，\w 不是 JavaScript 中自然语言字母的合适匹配器，因为它仅匹配 ASCII 字母数字字符。

您还可以通过将单字母单词和下一个单词之间的白色 space 替换为不可断开的 space 和 textContent.replace(/( \S) /g, "\xa0") 来防止在单字母单词后出现换行符

Answer 2

愚蠢但有效。只需根据需要更改单词和元素数组中的值

function removeSingleCharLineBreak(){
var words = ['a', 'i', 's', 'z', 'v', 'k', 'o', 'u', 
    'A', 'I', 'S', 'Z', 'V', 'K', 'O', 'U', '€',
    'na', 'za', 'do', 'Na', 'Za', 'Do',
    ];

var elements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'td', 'td'];

$.each(words, function(index, word){

    var regex = new RegExp(" " + word + " ", "g");

    $.each(elements, function(index, element){

        $(element + ':contains( ' + word + ' )').each(function(){

            if (word == '€') 
            {
                $(this).html(
                    $(this).html().replace(regex, '&nbsp;' + word + '&nbsp;')
                );       
            }
            else
            {
                $(this).html(
                    $(this).html().replace(regex, ' ' + word + '&nbsp;')
                );                    
            }

        });

    });

});

}

将一个字母单词移动到下一行

Move one letter words to next line

html

text

words

move

word-wrap