个人中心
gpt4 book ai didi

javascript - 围绕枢轴词对齐文本

转载 作者：可可西里 更新时间：2023-11-01 13:36:12 27 4
gpt4 key购买 nike

如何围绕“枢轴”字对齐文本，使枢轴字出现在其行的中心(在浏览器中显示时)？

说 [ 和 ] 标记行的开始和结束，而 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/

27 4 0
文章推荐： jquery - 访问各个页面的选项卡内容jquery mobile
文章推荐： php - 在 functions.php WordPress 中包含外部文件
文章推荐： php - 碳 : diff two datetime objects by dates only
文章推荐： php - Eclipse PDT : " cannot be resolved to a type" for default php classes like DateTime, 异常等
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com