用jQuery检测换行符？

Question

有没有可能让jQuery/javascript检测字符串被破坏的位置(为了适应CSS宽度约束),以便在新行的开头之前插入DOM元素？

Answer 1

我提出了一种方法,但是对于你的目的来说可能有些过分,所以考虑到这一点.

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

它不会很好地处理浮动元素,还有一些其他情况会崩溃.如果您想要更多选项,或者如果它不适合您的目的,或者如果您不确定如何应用它,我会尽力提供帮助,请告诉我.

Answer 2

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

1. 等宽字符
2. 计算一个字符的大小
3. 计算容器的大小
4. 每行查找字符
5. 查找行将中断的位置(即空格,破折号等)
6. 获取所有破坏索引.

看一下相关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/

Answer 3

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

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.