为了账号安全,请及时绑定邮箱和手机立即绑定

用jQuery检测换行符?

/ 猿问

用jQuery检测换行符?

梵蒂冈之花 2019-10-19 16:47:41

是否有可能让jQuery / javascript检测字符串在何处损坏(以便适合CSS宽度限制),以便在新行的开头之前插入DOM元素?



查看完整描述

3 回答

?
HUX布斯

我想出了一种方法,但是出于您的目的,它可能会过大,因此请考虑到这一点。


您需要创建该元素的副本,清空原始元素,然后将每个单词移回原始元素。如果高度在任何时候都发生变化,则该单词之前会有换行符。使用会很简单$(el).text(),但是如果里面可以有其他标签(而不仅仅是文本),它将变得更加复杂。我试图解释如何在此答案框中按节点将其分解,但发现仅在jsFiddle中创建jQuery插件会更容易。链接在这里:http : //jsfiddle.net/nathan/qkmse/(Gist)。


它不能很好地处理浮动元素,在其他一些情况下,它也会崩溃。让我知道您是否需要更多选择,或者它是否不能满足您的目的,或者您不确定如何应用它,我将尽力提供帮助。


查看完整回答
反对 回复 2019-10-19
?
慕森王

这是一种方法。注意:如果不使用等宽字体,我看不到理想的解决方案。与字符相等使此任务容易得多。


等宽字符

计算一个字符的大小

计算容器的大小

每行查找字符

查找行将中断的位置(即空格,破折号等)

获取所有中断索引。

看看相关HTML的jsfiddle。我尚未完成此功能。在计算断裂指数时,需要进行更多检查。现在,它正在使用lastIndexOf(''),但这忽略了下一个索引可能是空格或当前索引。另外,我不考虑其他换行符。但是,这应该是一个很好的起点。


var text = $('#text').text(),                   // "lorem ipsum ... "

    len = text.length,                          // total chars

    width = $('#text').width(),                 // container width

    span = $('<span />').append('a').appendTo('#sandbox'),

    charWidth = span.width(),                  // add single character to span and test width

    charsPerRow = Math.floor(width/charWidth); // total characters that can fit in one row


var breakingIndexes = [], // will contain indexes of all soft-breaks

    gRowStart = 0,        // global row start index

    gRowEnd = charsPerRow;// global row end index


while(gRowEnd < len){

    var rowEnd = text.substring(gRowStart, gRowEnd).lastIndexOf(' '); // add more checks for break conditions here

    breakingIndexes.push(gRowStart + rowEnd); // add breaking index to array

    gRowStart = gRowStart + rowEnd + 1; // next start is the next char

    gRowEnd = gRowStart + charsPerRow;  // global end inxex is start + charsperrow

}


var text2 = $('#text2').text();           // "lorem ipsum ... " now not width bound

var start = 0, newText = '';

for(var i=0; i < breakingIndexes.length; i++){

    newText += text2.substring(start, breakingIndexes[i]) + '<br />'; // add hard breaks

    start = breakingIndexes[i]; // update start

}


$('#text2').html(newText); // output with breaks

http://jsfiddle.net/Y5Ftn/1/


查看完整回答
反对 回复 2019-10-19
?
慕容4345310

这是我的脚本,它需要文本,然后使每行成为一个跨度


CSS:


    margin: 0;

        padding: 0;

    }


    .title{

        width: 300px;

        background-color: rgba(233,233,233,0.5);

        line-height: 20px;

    }


    span{

        color: white;

        background-color: red;

        display: inline-block;

        font-size: 30px;

    }


    a{

        text-decoration: none;

        color: black;

    }

html


<div class="title">

        <a href="">SOME TEXT LONG TEXT ANDTHISISLONG AND THIS OTHER TEXT</a>

    </div>

JS


$(function(){


        $(".title").find("a").each(function(){


            var $this = $(this);

            var originalText = $this.text();

            $this.empty();


            var sections = [];


            $.each( originalText.split(" "), function(){

                var $span = $("<span>" + this + "</span>");

                $this.append($span);


                var index = $span.position().top;


                if( sections[index] === undefined ){

                    sections[index] = "";

                }


                sections[index] += $span.text() + " ";

            });


            $this.empty();


            for(var i = 0; i< sections.length; i++){

                if( sections[i] !== undefined ){

                    var spanText = $.trim(sections[i]);                     

                    $this.append("<span>" + spanText + "</span>");

                }

            }


        });


    });

您必须包含jQuery。


查看完整回答
反对 回复 2019-10-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信