(图1(我想要什么
(图2(我不想要的
(图3(我不想要的
<!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>我想绘制边框，它包裹文本的"完整"one_answers"仅"范围(图1(，既不是文本的每一行(图2(，也不是矩形框(图3(。
但是，似乎没有办法做到这一点。我唯一想到的方法如下。
- 获取跨度顶点的坐标。例如
rects = getElemmentByTagName("span")[0].getClientRects()
- 在画布上沿
rects绘制线
但是，这种方法对我来说太乱了。
有更好的方法吗？
一个没有透明度但只使用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>试试这个：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>