圍繞樞軸詞對齊文本
[英]Aligning text around a pivot word
問題描述
如何圍繞“樞軸”單詞對齊文本，使得樞軸詞出現在其中心（在瀏覽器中顯示時）？
說[和]標記行的開頭和結尾， 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 ]
4 個解決方案
解決方案1
1 已采納 2013-05-15 19:38:27
重寫了我的第一個答案。 現在工作得好多了。 看小提琴 。 它基於您在樞軸詞上拆分段落的想法。 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>
解決方案2
1 2013-05-16 00:01:48
所以我做了一個小提琴，它沒有完全完成 它有一些錯誤 ，每次你調整容器你必須按RUN按鈕，如果在樞軸上方有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");
}
});
解決方案3
0 2013-05-15 18:23:40
最后，我找到了一種方法來表格。 如果你有不同的寬度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>
我也為你做了一個小提琴 ！
解決方案4
0 2013-05-15 19:42:37
我可以想到一個僅限CSS的解決方案，但它只有在前一個和后一個文本沒有超過一行時才有效。 您可以在http://jsfiddle.net/2UQhC/5/找到它（您需要點擊'run'才能正確查看）。
基本的想法是這樣的：
- 有一個父容器，其位置為：relative
- 句子的開頭有一個段落，句子的末尾有一個段落。 每個包含一個包含樞軸詞的開頭的跨度。
- 兩個段落都與位置：絕對。 開始是正確的：50％（所以它的右邊緣在中間）並且結束了：50％同樣。
- 旁邊的跨度都向中心漂浮。
- 然后，跨度給出具有基於負邊距的百分比的偽元素，其將各自的容器推向中心。 基於百分比的寬度使用包含浮動（而不是行塊）的寬度，這意味着這些百分比寬度的基礎將始終是以您選擇的任何字體或字體大小布置樞軸字的實際寬度。
這是代碼，如果太深奧，使用'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加上。
像在Word中一樣在div上環繞文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.