Можно ли создать вертикальную линию на стороне выделенного текста? - PullRequest
Новая
       53

Можно ли создать вертикальную линию на стороне выделенного текста?

0 голосов
/ 16 мая 2018

Что мне нужно, так это уметь выделять текст, который состоит из 1 или более строк, и после нажатия кнопки я хочу, чтобы вертикальная линия появилась слева от выделенного текста.

Например, в тексте на картинке ниже я бы хотел, чтобы синяя вертикальная линия появлялась слева от строки 2-4, когда я нажимаю кнопку. Пример

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

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Пока что это обходной путь, который я использую. Не работает, как я хочу, как вы можете видеть, если вы запускаете код. 

b {
    font-weight:normal;
    border-left: 2px solid blue;
    padding: 2;
    position: absolute;
    left: 0%;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	
	<body>
	    <span id="content" style="line-height: 1.8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet odio eu magna mattis vehicula. Duis egestas fermentum leo. Nunc eget dapibus eros, id egestas magna. Fusce non arcu non quam laoreet porttitor non non dui. Ut elit nisl, facilisis id hendrerit et, maximus at nunc. Fusce at consequat massa.
      </span>
      <br/><br/>
      <button id="vertical_line">Vertical Line</button>

<script>
document.getElementById("vertical_line").onclick = function() {
  // Get Selection
  sel = window.getSelection();
  if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
  }
  // Set design mode to on
  document.designMode = "on";
  if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
  }
  // Colorize text
  document.execCommand("bold", false,);
  // Set design mode to off
  document.designMode = "off";
}
</script>
	</body>
</html>

Как только я выделю текст, а затем нажму кнопку, выделенный текст будет окружен тегами «». Что я сделал, так это отредактировал стиль «жирный» в CSS. Пока это довольно уродливый обходной путь. Буду признателен, если кто-нибудь сможет найти более разумное решение.

Появляется вертикальная линия, но все еще не вдоль стороны, как я хочу.

Приветствия

0 голосов
/ 16 мая 2018

Установите div для текста, который вы хотите получить для строки вертикали 

//in your HTML
<div id="left-boarder">
   <p> words here </p>
</div>

//in your CSS 
#left-boarder {
boarder-left: 1px solid black;
}
...