Как обеспечить выбор только выбранного текста?

Question

Моя цель состоит в том, чтобы создать ряды линий (с номерами строк), что:

• номера строк выравнивают с соответствующей линией, даже если каждая «линия» превышает ширину родительского элемента и заворачивает к новой физической линии
• только выбран текст, а не номера строк
• пробельные сохраняется как внутри, так и перед каждой строкой

у меня есть фрагмент кода, который выполняет некоторые из этих целей на конкретных браузеров:

.code { counter-reset: line; } 
 
.line { counter-increment: line; white-space: pre-wrap; } 
 
.line:before { content: counter(line) " - "; }

<div class="code"> 
 
    <div class="line">Line 1</div> 
 
    <div class="line"> Line 2</div> 
 
    <div class="line">Line 3</div> 
 
</div>

Вот проблема:

• все работает в Chromium
• все работает в Firefox для третьей цели, кроме - Пробелы в начале строки усечена для некоторых причина
• все работает в IE за исключением второй цели - номера строк включены в выбор

(У меня нет доступа к Mac, поэтому я понятия не имею о Safari. Мне слишком лениво тестировать Opera.)

Есть ли способ сделать эту работу во всех распространенных браузерах?

Answer 1

Короткий ответ: вы, вероятно, не можете получить IE & FF вести себя так же, как Chrome, или даже друг друга.

В настоящий момент Opera - это, по сути, Chrome (даже с использованием движка Google, а не Webkit), поэтому считайте его протестированным, если Chrome работает.

Longer информация я нашел ...
Этот вопрос показывает два плохое поведение из двух других браузеров:

1. MSIE:
   1. Это изначально выбрав генерируемое содержимое в ::before псевдо-элемента. По моему пониманию (и мнению других браузеров), правила говорят, что это НЕ предполагается: он не является частью DOM, он генерируется CSS.
   2. Существует атрибут HTML unselectable="on", который, как правило, заставляет IE прекращать выделение текста. Однако, если вы откроете this question в IE, вы увидите, что вы можете выбрать «невыбираемый» текст, если вы начинаете на блоке до того, как & продолжите перетаскивать его или щелкните правой кнопкой мыши внутри поля &, выберите «Выбрать все», затем «Копировать». Так что он даже не мягко пуленепробиваемый. Кроме того, атрибут не поможет вам защитить псевдоэлемент.
   3. Есть CSS user-select:none (и префиксы поставщика), но при попытке использовать его в JSFiddle с IE я не видел эффекта.
   4. Последним вариантом для IE является Javascript: onselectstart="return false", который является идеальной бензопилой для отсечения купонов.
2. Firefox:
   1. Он не копирует форматирование, даже когда CSS диктует дисплей должен показывать Пробельные. я видел Bugzilla issue в этом датировке до 2001 (?! ?? !!), с комментариями за последние 14 лет, аргументируя почему pre белое пространство должно быть сохранено в буфер обмена, но Mozilla в основном игнорирует его.
   2. У меня есть надстройка для копирования в виде обычного текста, но я считаю, что она разметки разметки из созданной Firefox копии, поэтому надстройка также не получает белое пространство.
   3. Существует about:configoption, в котором говорится, что Firefox следует использовать пробел рядом со словом, дважды щелкнув его, чтобы выбрать его, но здесь совершенно бесполезно. я упоминаю его только для того, чтобы исключить его. :(