Есть ли какой-нибудь способ нарисовать границу вокруг «всего» и «только» диапазона в javascript?

#javascript #html #css #border

#javascript #HTML #css #граница

Вопрос:

(рисунок 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>  

Я хочу нарисовать границы, которые охватывают «весь» и «только» диапазон текста (рисунок 1), ни каждую строку текста (рисунок 2), ни прямоугольное поле (рисунок 3).

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

  1. Получить координаты вершин диапазона. Например,

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

  1. Нарисуйте линии вдоль rects на холсте.

Но этот метод кажется мне слишком запутанным.

Есть ли лучший способ?

Комментарии:

1. Пожалуйста, включите разметку, чтобы люди могли легко воспроизвести ваш пример и показать вам, как это сделать.

Ответ №1:

хакерская идея без прозрачности, но с использованием только 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>  

Ответ №2:

попробуйте это: 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>  

Комментарии:

1. возможно, вам придется настроить высоту и ширину в разделе «дисплей: встроенный»

2. Нет, это не работает. Ваш ответ выглядит так (рисунок 3. Чего я не хочу).

3. о, я не понял, где два «я не хочу этого» приготовьтесь к обновлению моего поста, я прокомментирую, когда это произойдет