Добавьте скобки до и после абзаца в HTML / CSS - PullRequest
Новая
       10

Добавьте скобки до и после абзаца в HTML / CSS

2 голосов
/ 12 февраля 2020

У меня есть страница HTML с редактируемыми абзацами (хотя это могут быть промежутки или деления, если это поможет решить проблему). Я хочу, чтобы пользователь набрал какой-то текст, и чтобы страница автоматически помещала скобки вокруг него. Скобки должны быть в другом элементе, который нельзя редактировать, чтобы их нельзя было удалить. Например, предположим, что пользователь вводит следующее:

Hello
World

На странице должно отображаться следующее:

(Hello
World)

Важно: обратите внимание, как закрывающая часть должна соответствовать последней строке текста.

Вот код, который очень близко подходит ко мне, но не совсем так: 

<span>(</span>
<p contenteditable style="display:inline"></p>
<span>)</span>

Это отлично работает с одной строкой текста. Проблема состоит в том, что при вводе более одной строки текста закрывающая часть выпадающего списка после последней строки текста из-за браузера (я использую Chrome) автоматически вставляет разрыв в конце абзаца, поэтому мы получить это:

(Привет
Мир
)

Может быть, все, что мне нужно сделать, - это запретить браузеру добавлять этот конечный разрыв, но я не знаю, как. Мне бы хотелось, чтобы решение было в идеале HTML / CSS, что-то вроде текстового оформления или преобразования текста. Я пытался использовать :: before и :: after в параграфе вместо span, но я не мог заставить это работать правильно. Есть идеи?

Спасибо за помощь!

Ответы [ 2 ]

5 голосов
/ 12 февраля 2020

Псевдоэлементы работают нормально. 

p {
  width: 50%;
}

p::before {
  content: "("
}

p::after {
  content: ")"
}
<p contenteditable style="display:inline-block">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est distinctio molestias, cupiditate soluta quibusdam dolore dolor optio quae praesentium recusandae incidunt deserunt eaque explicabo vero.</p>
1 голос
/ 12 февраля 2020

Обходное решение (несколько гетто) для конечных разрывов: скрыть все <br> элементы, когда контент не сфокусирован 

[contenteditable] {
  display: inline
}

[contenteditable]:focus br {
  display: inline-block
}

[contenteditable] br {
  display: none
}

[contenteditable]:focus {
  background: yellow;
  padding: 3px;
}
<span>(</span>
<div contenteditable="true">
  <span contenteditable="inherit">type here<span>
</div>
<span>)</span>
...