有什么方法可以在 'whole' 和 'only' 范围内绘制边界 javascript？

Question

(figure 1) What I want

(figure 2) What I don't want

(figure 3) What I don't want

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    <span>Lorem Ipsum has been the industry's standard dummy text ever since the
     1500s, when an unknown printer took a galley of type and scrambled it to make a
     type specimen book.</span> It has survived not only five centuries, but also
     the leap into electronic typesetting, remaining essentially unchanged. It was 
    popularised in the 1960s with the release of Letraset sheets containing Lorem 
    Ipsum passages, and more recently with desktop publishing software like Aldus 
    PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>

我想绘制边框 'whole' 和 'only' 文本跨度（图 1），而不是每行文本（图 2）或矩形框（图 3）。

但是，似乎没有办法正确地做到这一点。我想到的唯一方法如下。

获取跨度的顶点坐标。例如，

rects = getElemmentByTagName("span")[0].getClientRects()

在 canvas 上沿 rects 画线。

但是，我觉得这个方法太乱了。

有没有更好的方法？

Answer 1

试试这个： html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="page">
      <h1 class="text">"I want to draw borders which wraps chunk of text (figure 1), neither each line of text(figure 2) nor rectangular box(figure 3). But, it seems that there is no way to do it properly. The only method I came up with is below. Get coordinates of vertices by getClientRects() Draw lines on canvas. But, this method feels too messy to me. Is there any better way?"</h1>
        <img class="pic" src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" style="width:200px;height:200px;">
    </div>
  </body>
</html>

css

<style>
 /* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
      html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
.page .text {
font-family: 'Roboto', sans-serif;
  font-weight: 100;
  background-attachment: fixed;
  float: right;
  vertical-align: top;
  display: inline;
    width: 1100px;
    height: 200px;
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

}
.page .text .pic {
float: left;
background-attachment: fixed;
vertical-align: top;
height:200px;
width:200px;
display: inline;
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 1px solid black;
  background-color: white;
}
.page{
background-color:white;
background-size: cover;
height: 500px;
background-attachment: fixed;
align-items : top;
}
</style>

并在一个测试框中一起（请确保在单击运行片段后单击“整页”，否则它看起来不正确！）：

<style>
 /* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
      html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
.page .text {
font-family: 'Roboto', sans-serif;
  font-weight: 100;
  background-attachment: fixed;
  float: right;
  vertical-align: top;
  display: inline;
    width: 1100px;
    height: 200px;
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

}
.page .text .pic {
float: left;
background-attachment: fixed;
vertical-align: middle;
height:200px;
width:200px;
display: inline;
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 1px solid black;
  background-color: white;
}
.page{
background-color:white;
background-size: cover;
height: 500px;
background-attachment: fixed;
align-items : top;
}
</style>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="page">
      <h1 class="text">"I want to draw borders which wraps chunk of text (figure 1), neither each line of text(figure 2) nor rectangular box(figure 3). But, it seems that there is no way to do it properly. The only method I came up with is below. Get coordinates of vertices by getClientRects() Draw lines on canvas. But, this method feels too messy to me. Is there any better way?"</h1>
        <img class="pic" src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" style="width:200px;height:200px;">
    </div>
  </body>
</html>

Answer 2

一个没有透明度但仅使用 CSS 的骇人听闻的想法。不是一个非常可靠的解决方案，因为您可能需要根据实际字体和其他属性调整不同的值。

span {
  background:#fff;
  box-shadow:
   0 -2px 0 0 #fff,
   0 0 0 2px red;
  position:relative;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
span::before {
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  width:100vw;
  height:2px;
  background:red;
}
span::after {
  content:"";
  position:absolute;
  top:calc(1.2em - 2px); /* you many need to update the 1.2em based on your font */
  right:100%;
  width:100vw;
  height:2px;
  background:red;
}


p {
  margin: 80px 0;
  text-align: justify;
  font-size: 22px;
  overflow:hidden;
  padding:2px;
}

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  <span>Lorem Ipsum has been the industry's standard dummy text ever since the
     1500s, when an unknown printer took a galley of type and scrambled it to make a
     type specimen book.</span> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

有什么方法可以在 'whole' 和 'only' 范围内绘制边界 javascript？

Is there any way to draw border around 'whole' and 'only' span in javascript?

html

javascript

css

border