html - 如何使下一行中的文本居中而不左对齐？

Question

我有一个具有以下 CSS 的 div:

 .div_stuff {
 width: 830px;
 margin: 20px auto;
 font-size:22px;
 }

如何防止进入下一行的文本在上面的文本下方不左对齐，而只是在下一行居中？

Answer 1

虽然我不确定我是否理解你想要实现的目标并且我找不到这个用例......通过添加一些带有 javascript 的 span 标签可以从第二行更改对齐方式/jQuery ( DEMO ):

$(function() {
    var box = $('.div_stuff');
    var text = box.text();

    var words = text.split(' ');
    box.text(words[0]);
    var height = box.height();
    var chars = 0;
    for(var i = 1; i < words.length; i++){
        box.text(box.text() + ' ' + words[i]);
        chars += words[i-1].length + 1;
        if(box.height() > height){
            height = box.height();      
            box.html('<span class="first-line">' + text.substring(0,chars) + '</span><span class="following-lines">' + text.substring(chars+1, text.length)+'</span>');
            break;
        }
    }
});

并为它们设置不同的对齐方式:

span {
    display: block;
}

.first-line {
    text-align: left;
}

.following-lines {
    text-align: center;
}

我用过 that answer用于确定自动换行符。