Question

我需要的是能够选择超过1行或更多行的文本，按下按钮后，我希望在所选文本的左侧显示一条垂直线。

例如，在下图中的文字中，当我点击按钮时，我希望在第2行到第4行的左侧出现蓝色垂直线。 Example

感谢您的帮助！

Answer 1

将div设置为您想要获取垂直线的文本

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

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

Answer 2

到目前为止，这是我正在使用的解决方法。如果你运行代码，就不会像我想的那样工作。

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>

选择文本然后单击按钮后，所选文本将被标记“＆lt; b＆gt;”包围。我所做的是在CSS中编辑“粗体”的样式。到目前为止，这是一个非常丑陋的工作。如果有人能提出更智能的解决方案，我将不胜感激。

有一条垂直线出现，但仍然没有沿着我希望它做的那边。

干杯

是否可以在SELECTED文本的一侧创建垂直线？

2 个答案: