javascript - 多行选择

Question

我想在 html 中实现一个多行选择部分，如下所示:

但是对于 标签和 css，我能想到的最接近的是:

Code pen

.textblock {
  width:200px;
  /* I don't want justified text, but this straightens the ratty edge */
  text-align: justify;
}
.highlighted {
  border-radius: 10px 0 10px 0;
  background-color: rgb(61, 107, 39);
  border: 1px solid rgb(61, 107, 39); /* bit of a cheat*/
  /* the following almost works */
  /* box-shadow: 10px 10px 10px black; */
 }

这不是很好，因为:

• 拐 Angular 不是全圆的
• 我真的不想要对齐的文本(hack 使右边缘对齐)
• 启用框阴影会导致灾难

关于如何让它变得更好的任何提示？

现在我想知道我是否必须在 javascript 中制作我想要的形状并将其绘制在较低的图层上。也许我可以使用类似 offsetLeft 的东西和 friend 一起获得跨度的尺寸......？

当然，如果在 css 中有更简单的方法，我很愿意这样做!

Answer 1

您可以使用 box-decoration-break: clone; 来改变线条的样式，对于半径，您可以使用 box-shadow 来隐藏线条您不需要的额外 border-radius 。最后，你的代码会变成这样:

.textblock {
  width:200px;
  text-align: justify;
  line-height: calc(1rem + 6px); 
}

.highlighted {
  display: inline;
  background-color: rgb(61, 107, 39);
  box-shadow: 5px 0 0 rgb(61, 107, 39), -5px 0 0 rgb(61, 107, 39), 5px 5px 0 rgb(61, 107, 39), -5px 5px rgb(61, 107, 39), 2px 6px 6px #000000, -2px 6px 6px #000000;
  box-decoration-break: clone;
  padding: 4px;
  border-radius: 5px;
 }

<div class="textblock"> 
    Four score and seven years ago our fathers brought forth upon this continent,<span class="highlighted">a new nation, conceived in Liberty, and dedicated to the proposition  that all men are created equal.

    Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war</span>. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

    But, in a larger sense, we can not dedicate—we can not consecrate—we can not hallow—this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth.

—Abraham Lincoln
</div>

我还设置了 line-height 来管理行与行之间的空间，并使它们完美适合某些不同的字体。

编辑

您可以删除文本 block 类中的 text-align: justify;，但您需要添加 float: left; 以获得全 Angular 背景。

Be aware this technique will move the highlighted section to a completely new block.

.textblock {
  width:200px;
  line-height: calc(1rem + 6px); 
}

.highlighted {
  display: inline;
  float: left;
  background-color: rgb(61, 107, 39);
  box-shadow: 5px 0 0 rgb(61, 107, 39), -5px 0 0 rgb(61, 107, 39), 5px 5px 0 rgb(61, 107, 39), -5px 5px rgb(61, 107, 39), 2px 6px 6px #000000, -2px 6px 6px #000000;
  box-decoration-break: clone;
  padding: 4px;
  border-radius: 5px;
 }

<div class="textblock"> 
    Four score and seven years ago our fathers brought forth upon this continent,<span class="highlighted">a new nation, conceived in Liberty, and dedicated to the proposition  that all men are created equal.

    Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war</span>. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

    But, in a larger sense, we can not dedicate—we can not consecrate—we can not hallow—this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth.

—Abraham Lincoln
</div>