Question

body{
  width: 50%;
  : #c9ffb5;
  border: 20px solid grey;
  text-align: justify;
  padding: 30px;
  margin-left: 25%;
}

h4{
  color: #0f4aff;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
}

h2, p{
  font-family: 'Source Sans Pro', sans-serif;
}


span.border{
  border-left: 5px solid grey;
  padding-left: 3px;
}

<p>
  <span class="border">Lorem Ipsum is simply dummy text of the printing 
  and typesetting industry. 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 <span> tag无法生效。边框仅在段落的第一行生效。

这是为了在段落中的特定行上放置边框以引起读者注意。 Zen博客的CSS无法解释span标签的巧妙用法。还尝试了W3Schools的示例。

Answer 1

请尝试使用display:block CSS添加span.borders。它对我有用

 span.borders{
  display:block; 
  border-left: 5px solid red;  
 padding-left: 3px; 
}

谢谢

Answer 2

之所以发生这种情况，是因为跨度被作为一个元素处理。只需添加即可获得结果：

span.border{
  display: inline-block;   // that one
  border-left: 5px solid grey;
  padding-left: 3px;
}

Answer 3

您可以使用scss并为line-height添加一个变量，然后在:before上添加<p>

在这种情况下，无需包括跨度。

您还可以通过调整height（例如（4 * $line-height）来指定要包括边框的行数

SCSS：

$line-height: 1.5em;
p {
  line-height:$line-height;
  &:before {
    content:"";
    border-left:5px solid grey;
    height: 3 * $line-height;;
    display: block;
    float: left;
    margin-right: 3px;
  }
}

See the example

Answer 4

您也可以尝试

span.border {
    position: relative;
    display: inline-block;
    padding-left: 8px;
}
span.border:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: 5px solid grey;
}

Answer 5

考虑默认情况下，span元素具有嵌入式显示：

span {
display: inline
}

因此，要使其正常工作，您需要将CSS中的跨度显示更改为阻止状态：

span {
display: block
}

Answer 6

   span.border{
        display : bloack;
        border-left: 5px solid grey;
        padding-left: 3px;
    }

跨度标签无法在段落开始处形成初始边框

6 个答案: