Good afternoon, tell me how in the text on the page in the <p> you can search for the end of a line so that you can change every odd line of text. I.e

 <p>ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ *ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚* ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ *ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚*</p>
  • Please clarify whether there is a line break in the text, or is it necessary to recognize the end of the line after it is displayed on the page (taking into account the width of <p>)? - therainycat
  • No characters, text as it is. Interested in exactly how to find out after the text is displayed on the page, given that the width of the lines of text may vary. Perhaps this is similar to the definition of word wrap. - Aivengo
  • one
    Unfortunately, never dealt with this issue. While someone more knowledgeable will answer for sure, I can suggest my own guesses - I would try to insert some element after each word and check its position in height (a quick search prompted me to use getBoundingClientRect ()) or insert text by word, checking the height < p> (may affect performance very much). The only thing I am not sure about is whether the dimensions and positions of the elements are updated immediately after they are moved (and, as a result, whether everything can be done in a normal cycle). (Element I would insert with zero width) - therainycat

3 answers 3

Why not.

Example:

 $(".stripe").each(function(){ var obj = $(this); var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>"); obj.html(html); }); function highlight(){ var offset = 0; var colorIndex = 0; var colors = ["#ccc","#000"]; var spans = $(".stripe span"); for(var i = 0; i < spans.length; i++){ var newOffset = spans[i].offsetTop; if(newOffset !== offset){ colorIndex = colorIndex === 0 ? 1 : 0; offset = newOffset; } spans[i].style.color = colors[colorIndex]; } } highlight(); $(window).on("resize", highlight); 
 body { font: 13px/1.5 sans-serif; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="stripe"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dui diam, euismod et pretium at, lacinia condimentum leo. Aenean interdum mi nec metus elementum vel aliquet lorem porttitor. Morbi facilisis sollicitudin libero, id tincidunt lectus convallis faucibus. Curabitur bibendum massa vel tortor rutrum dictum. Donec sit amet sapien eros. Fusce nisi est, vulputate eu pulvinar sed, facilisis a massa. Suspendisse vitae nibh non ante facilisis tristique. Nunc laoreet, orci eu consectetur bibendum, neque purus auctor justo, nec placerat metus massa in risus. Morbi gravida ultrices nisi, nec faucibus nulla tincidunt eu. Quisque tristique quam non dui sollicitudin blandit tincidunt ante vehicula. Donec massa justo, mollis ut ultricies et, eleifend non nisi. Nullam fermentum interdum ipsum eu elementum. Phasellus vel dui eget ante vehicula adipiscing vel a mauris. Curabitur vitae ipsum sed magna ultrices scelerisque. Ut orci diam, scelerisque pellentesque dapibus vitae, vestibulum nec quam. Maecenas vestibulum vulputate adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc molestie aliquet vehicula. Aliquam porttitor vestibulum felis vitae consectetur. Etiam ac urna at felis lobortis tristique. Maecenas nibh elit, elementum et dictum id, viverra non lectus. Donec hendrerit gravida libero. Duis quis nisi et risus tristique bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut accumsan semper magna vel iaculis. Phasellus sagittis tristique orci non placerat. Vivamus felis nibh, semper eu placerat sed, hendrerit vitae odio. Praesent fermentum congue fringilla. Aliquam dolor mauris, tempor eu luctus ac, feugiat ac nibh. Sed non orci lorem. Quisque ut odio nunc. Duis vel felis nulla. Aliquam rutrum lorem in libero facilisis tristique in vitae dolor. Ut odio eros, suscipit nec egestas eu, gravida suscipit lectus. Suspendisse sed urna quam. Fusce quis sagittis tellus. Cras eleifend euismod ultrices. Fusce egestas orci eu erat hendrerit at eleifend dolor ullamcorper. Donec a mauris mi. In posuere rutrum tristique. Aliquam erat volutpat. Aliquam ante mi, mattis at facilisis cursus, porta id augue. Morbi feugiat, odio eget imperdiet facilisis, ligula tellus eleifend magna, sagittis imperdiet mi neque vitae erat. Pellentesque condimentum convallis ligula, a sollicitudin neque porttitor vel. Mauris adipiscing pharetra justo, ac molestie ante congue vitae. Vestibulum a est arcu, in laoreet justo. Cras tincidunt eros id ipsum vulputate eu pulvinar odio fermentum. </div>

    Elementary - we take the contents of p ( innerHTML ), we divide the contents by the line split("\n") ( split("\n") ), we go through the array ( map ), if the index is even (divided by 2 without remainder) - we skip, otherwise the line is odd and we can change it Next, we glue the modified array again by the line join ( join ) and insert the content into p :

     let p = document.querySelector('p'), data = { 1: ['Merry', 'christmas'], 3: ['And happy', 'new year'] }; p.innerHTML = p.innerHTML.split(`\n`).map((e, i) => i % 2 !== 0 ? `${data[i][0]} | ${e} | ${data[i][1]}` : e).join(`\n`); 
     <pre> <p>ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ *ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚* ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ *ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚ ะขะตะบัั‚*</p> </pre>

    • 2
      But it turns out that only if we ourselves add the hyphenation to the text can we find \n , if we initially have a solid text without hyphenations, this does not work. Maybe you can tell how the browser carries the line break or where you can find out more about it. - Aivengo
    • @Aivengo, the browser decides when to where to move by the rules in CSS, by markup, sometimes even by the position of the moon. If it is possible to learn this, then only by the great witch of Merlin's level. If you need this witchcraft, then you are solving the problem with the wrong means (screw problem with a hammer). - user207618

    Can be done in js. Algorithm:

    • Each word is wrapped in a span
    • We loop through all the span and paint them in one color.
    • Until the next span begins to be located below the previous one.
    • We paint it and all subsequent ones in a different color.
    • Until the next span begins to be even lower
    • We run the script when resizing the window, with a slight delay for performance

    Working example: http://jsfiddle.net/gambala/j0Lbu7ow/

    The answer was the same on the foreign Stack Overflow: https://stackoverflow.com/questions/15830449/how-to-target-alternate-odd-even-text-lines