我有一个具有以下 CSS 的 div:
.div_stuff {
width: 830px;
margin: 20px auto;
font-size:22px;
}
如何防止进入下一行的文本在上面的文本下方不左对齐,而只是在下一行居中?
最佳答案
虽然我不确定我是否理解你想要实现的目标并且我找不到这个用例......通过添加一些带有 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用于确定自动换行符。
关于html - 如何使下一行中的文本居中而不左对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16489142/