Home/ Questions/Q 6762789
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T14:23:58+00:00

TL; DR: I’m looking for a way to display a SPAN element that can

  • 0

TL; DR: I’m looking for a way to display a SPAN element that can achieve the desired behavior showed in the 1st and 3rd pictures below.

Interactive Code: http://jsfiddle.net/53GZe/1/

When selecting text from a block of text, the display needs to be inline, so that no breaks are generated.

enter image description here

Now when I try to select multiple elements with the same display: inline: I get this:

enter image description here

Because the display is set to inline, it doesn’t know how wide to make the <span> (the element inserted around the selection to give the custom highlight effect)

So, for the other case, when I set display to table-cell, I get this behavior:

enter image description here

Which is wonderful, and kind of neat. Except for that it doesn’t work with an inline block of text like in my first example:

enter image description here

(notice the breaks before and after the selection)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Could you use jQuery to search the children of the highlighted div. Then if there are any blocked elements or line breaks, set the display property to table-cell.

    Or by setting a new CSS rule for the situation, maybe again, by using jQuery to check for the inner elements?

    .situation1 .highlighted { display:table-cell; }
.situation2 .highlighted { display:inline; }
    • 0