CSS/Javascript: Как нарисовать минимальную границу вокруг встроенного элемента?

Рассмотрим следующий HTML:

<p>This is a potentially large paragraph of text, which <span>may get 
wrapped onto several lines when displayed in the browser.
I would like to be able to draw a minimal</span> box round the span</p>

Я хотел бы нарисовать минимальную границу вокруг диапазона.

То есть:

  • Если диапазон отображается в одной строке, граница эквивалентна установке стиля CSS: 1px solid black;
  • Если диапазон отображается на нескольких строках, граница рисуется вокруг самых крайних краев пролета, а не между линиями, которые он пересекает. Это эквивалентно установке цвета фона CSS на пролете и рисованию линии по краям выделенной области.

Я уверен, что это невозможно сделать с использованием только одного CSS (во втором случае). Решения, включающие библиотеки javascript или те, которые специфичны для Firefox, приемлемы.

Это макет того, как должен выглядеть второй сценарий:

Second scenario mock-up

ОТВЕТЫ

Ответ 1

Попробуйте добавить схему, а не границы. Http://jsfiddle.net/tarabyte/z9THQ/

span {
  outline: 2px solid black;   
}

Firefox рисует контур между линиями. Есть обходной путь: http://jsfiddle.net/z9THQ/2/

.wrapped {
   outline: 2px solid black;
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}
<p>
   This is a potentially large paragraph of text, which 
      <span class="wrapped"><span> 
        may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal
      </span></span> 
   box round the span
</p>