如何围绕“枢轴”字对齐文本，使枢轴字出现在其行的中心(在浏览器中显示时)？
说 [ 和 ] 标记行的开始和结束，而 X 是一个中线标记，为了清楚起见包含在这里。
所以，对于单行:
X
[ I am centered around my PIVOT word. ]
[ Here is the PIVOT word of this second example. ]
对于多行，它可以是这样的:
X
[ This is multiline text with ]
[ one word which functions as the PIVOT. Then we have some more boring ]
[ multiline text you don't have to worry about ]
最佳答案
修改了我的第一个答案。现在好多了。查看fiddle .它基于您将段落拆分为枢轴词的想法。核心词和最后一节被放回到段落中。然后将前半部分(在主元词之前)分成一个数组，向后遍历(每次弹出最后一个元素)以填充跨度，直到达到其宽度。这将重复进行，直到数组中没有更多的单词为止。我的母语不是英语，所以我希望这一切都有意义。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.9.0/jquery.min.js"></script>
<style type="text/css">
.container {
width: 500px;
border: 1px solid #ddd;
}
.pivotWord {
background-color: red;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in PIVOT voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. PIVOT Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et PIVOT dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non PIVOT proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<script type="text/javascript">
function pivotAround(pivotword){
$('p').each(function(){
//initialize a few things
var sentence = $(this).html();
var splittedSentence = sentence.split(pivotword);
var paragraphWidth = $(this).width();
$(this).html("");
//create elements from the sentence parts.
var pivotSpan = $("<span />", {
'class': 'pivotWord'
}).html(pivotword);
var postSpan = $("<span />", {
}).html(splittedSentence[1]);
//append them to the DOM
$(this).append(pivotSpan)
.append(postSpan);
//get size of pivotSpan
var pivotSpanWidth = pivotSpan.width();
//calculate where the pivot word should be
var pivotSpanLeftMargin = (paragraphWidth / 2) - (pivotSpanWidth / 2);
//make global array of splittedSentence[0]
preSpanArray = splittedSentence[0].split(' ');
distributeWithinMargin(pivotSpanLeftMargin, this);
//array not empty?
while(preSpanArray.length > 0){
distributeWithinMargin(paragraphWidth, this);
}
});
}
function distributeWithinMargin(margin, element) {
var span = $("<span />", {
'style': 'margin-left: -40000px'
});
$(element).prepend(span);
while (preSpanArray.length > 0 && span.width() <= margin) {
var lastElement = preSpanArray.pop();
span.prepend(lastElement + " ");
}
/*
* last word makes the span too wide, so push it back to the stack
* only do this when array not empty, or you will end up in an
* endless loop
*/
if (preSpanArray.length > 0) {
preSpanArray.push(lastElement);
//remove that word from the span
var firstSpaceIndex = $(span).html().indexOf(" ");
$(span).html($(span).html().substring(firstSpaceIndex + 1));
}
//calculate the text-indent from that value
var textIndent = margin - span.width();
$(span).css('margin-left', textIndent);
}
pivotAround("PIVOT");
</script>
</body>
</html>
关于javascript - 围绕枢轴词对齐文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16567164/