如何围绕“枢轴”单词对齐文本，以便枢轴词出现在其中心（在浏览器中显示时）？
说[和]标记行的开头和结尾，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 ]
答案 0 :(得分：1)
重写了我的第一个答案。现在工作得好多了。请参阅fiddle。它基于您在枢轴词上拆分段落的想法。 pivotword和最后一部分放回段落中。然后将前半部分（在枢轴字之前）分割成一个数组，该数组向后移动（每次弹出最后一个元素）以填充跨度，直到达到其宽度。这将重复，直到数组中没有剩余的字。我不是母语为英语的人，所以我希望这一切都有道理。
<!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>
答案 1 :(得分：1)
所以我做了一个小提琴没完全和它有一些错误，每次你调整容器大小时你都必须点击 RUN < / strong>按钮如果在枢轴上方有2条线它开始断开，但它在基础知识中起作用：http://jsfiddle.net/dFv3b/1/
<强> HTML：
<div class="container">
<p>I am centered around my PIVOT word.</p>
<p>Here is the PIVOT word of this second example.</p>
<p>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.</p>
</div>
<强> JS / jQuery的：
var containerWidth = $(".container").width();
$("p:contains('PIVOT')").html(function() {
var text = $(this).html().split(' ');
for( var i = 0, len = text.length; i < len; i++ ) {
var p = ("PIVOT" == text[i]) ? " pivot" : "";
text[i] = '<span class="word-' + i + p + '">' + text[i] + '</span>';;
}
return text.join(' ');
}).each(function() {
var $pivot = $(this).find(".pivot");
var pivotPos = $pivot.offset().left;
var pivotWidth = $pivot.width();
if (pivotPos + pivotWidth / 2 < containerWidth / 2) {
// one line in the 1nd half
$(this).css("text-indent", (containerWidth / 2) - (pivotWidth / 2) - pivotPos);
} else {
// multi line in the 2nd half
var indent;
// indent half width
$(this).css("text-indent", containerWidth / 2);
pivotPos = $pivot.offset().left;
while (pivotPos + pivotWidth / 2 < containerWidth / 2) {
var indent = Number($(this).css("text-indent").replace(/[^-\d\.]/g, ''));
$(this).css("text-indent", indent + 1);
pivotPos = $pivot.offset().left;
}
// return just before half
$(this).css("text-indent", indent -1);
pivotPos = $pivot.offset().left;
var words = $(this).find("span").toArray();
var begin;
// find the first word on pivot line
for(var i=0, len=words.length; i<len; i++) {
if (0 === $(words[i]).offset().left) {
begin = words[i];
break;
}
}
$(begin).css("margin-left", String((containerWidth /2) - (pivotWidth /2) - pivotPos) + "px");
}
});
答案 2 :(得分：0)
最后，我找到了一种方法来表格。如果table的宽度不同，则应使用left和right td - s的宽度值（必须等于百分比）。
<table width="700px">
<tr>
<td style="width:47%;height:25px;text-align:right;overflow:hidden;whitespace: nowrap;">text</td>
<td style="min-width:40px;width:40px;height:25px;">pivot</td>
<td style="width:47%;height:25px;overflow:hidden;whitespace: nowrap;">text</td>
</tr>
<tr>
<td style="width:47%;height:25px;text-align:right;overflow:hidden;whitespace: nowrap;">longer text tot the left</td>
<td style="min-width:40px;width:40px;height:25px;">pivot</td>
<td style="width:47%;height:25px;overflow:hidden;whitespace: nowrap;">short here</td>
</tr>
<tr>
<td style="width:47%;height:25px;text-align:right;overflow:hidden;whitespace: nowrap;">sample</td>
<td style="min-width:40px;width:40px;height:25px;">pivot</td>
<td style="width:47%;height:25px;overflow:hidden;whitespace: nowrap;">text text text text text text text</td>
</tr>
</table>
我也为你做了fiddle！
答案 3 :(得分：0)
我可以想到一个仅限CSS的解决方案，但只有在前一个和后一个文本没有超过一行时它才有效。您可以在http://jsfiddle.net/2UQhC/5/找到它（您需要点击“运行”以正确查看它。）
基本理念是：
这是代码，如果太深奥，使用'lilacs'作为支点词：
HTML -
<div>
<p id="left"><span>LILACS</span>April is the cruellest month, breeding </p>
<p id="right"><span>LILACS</span> out of the dead land</p>
</div>
和CSS -
div {
position: relative;
}
#left {
position: absolute;
right: 50%;
}
#right {
position: absolute;
left: 50%;
}
#left span {
float: right;
}
#right span {
float: left;
visibility: hidden;
}
#left span:after {
content: "";
margin-right: -50%;
}
#right span:before {
content: "";
margin-left: -50%;
}
这将适用于句子两边的宽度（只要它们没有多行），并且应该从IE8加上。