最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Get text in CSS3 column? - Stack Overflow

programmeradmin1浏览0评论

I'm using CSS3's support for columns support in a project (so far I've found it much more robust and dependable than most JavaScript solutions out there).

Question: Is it possible to get the text that is in a specific column, in any way?

I'm using CSS3's support for columns support in a project (so far I've found it much more robust and dependable than most JavaScript solutions out there).

Question: Is it possible to get the text that is in a specific column, in any way?

Share Improve this question edited Mar 23, 2015 at 1:29 mattsven asked Mar 18, 2013 at 16:20 mattsvenmattsven 23.3k11 gold badges72 silver badges106 bronze badges 7
  • Seems not quite ready for prime time: caniuse./#feat=multicolumn – Diodeus - James MacFarlane Commented Mar 18, 2013 at 16:26
  • 2 Maybe this will help stackoverflow./questions/9430124/… – imkost Commented Mar 18, 2013 at 16:28
  • 4 @DreamEater: How is jQuery related to this question? – Bergi Commented Mar 18, 2013 at 16:28
  • 3 @Bergi jQuery is always related. – mattsven Commented Mar 18, 2013 at 16:32
  • 1 @imkost: Good link and even a possible duplicate, only it has no valid answer yet :-( – Bergi Commented Mar 18, 2013 at 16:33
 |  Show 2 more ments

2 Answers 2

Reset to default 7

And...what, two months later? I finally found the answer to this question. It's reliant on document.caretRangeFromPoint (Webkit) or document.caretPositionFromPoint.

var getAllTextInColumn = function(rect){
    /*
        rect should be the size and x,y of the column
        { top, left, width, height }
    */

    if(document.caretRangeFromPoint){
        var caretRangeStart = document.caretRangeFromPoint(rect.left, rect.top);
        var caretRangeEnd = document.caretRangeFromPoint(rect.left+rect.width-1, rect.top+rect.height-1);
    } else {
        return null;
    }

    if(caretRangeStart == null || caretRangeEnd == null) return null;

    var range = document.createRange();
    range.setStart(caretRangeStart.startContainer, caretRangeStart.startOffset);
    range.setEnd(caretRangeEnd.endContainer, caretRangeEnd.endOffset);

    return range.toString();
};

My only guess is to start replacing spaces with a SPAN, then detecting when the vertical position of that SPAN gets smaller, then you know you're in the next column. This last SPAN bees a column marker.

You can then copy the text that is between the beginning/end and/or a column maker.

发布评论

评论列表(0)

  1. 暂无评论