Full border length for span element regardless of text in span element

user_6784951 0
Viewed 76

I have this simple html:

.line {
  width: 100%;
  border-bottom: 1px solid rgb(101, 101, 101);
}
<div>
  <span class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</span>
</div>

What I currently have is this:

enter image description here

But what I'd like is the border to cover the entire length of each line regardless of the text. Something like this:

(Treat the 3 red squiggly lines as 3 straight black lines haha)

enter image description here

EDIT 1

From the answer provided. I see a double line here..

enter image description here

css html
4 Answers

If you want to use span, you need to separate it like this:

.line {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgb(101, 101, 101);
}
<div>
  <span class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque</span><span class="line"> quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae</span><span class="line"> quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</span>
</div>

But if your willing to use <p> tags you can do it like this:

.line {
  line-height: 20px;
  color: #333;
  background-image: 
repeating-linear-gradient(180deg, transparent, transparent 19px, #333 20px);
}
<div>
  <p class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</p>
</div>

user_94980080

Your current snippet shows the standard behavior on a span with a border bottom. You can do it with a span, but when the word breaks, so do the borders. You can add word-break: break-all; to your span, then add the border-bottom to the div also so the bottom is always underlined at 100%.

.line {
  width: 100%;
  border-bottom: 1px solid rgb(101, 101, 101);
  word-break: break-all;
}

div {
  display: inline-block;
  border-bottom: 1px solid rgb(101, 101, 101);
}
<div><span class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</span>
</div>

Solution #2 ~ no double line.

.line {
  width: 100%;
  border-bottom: 1px solid rgb(101, 101, 101);
  word-break: break-all;
}

div {
  display: inline-block;
}

span:after {
  content: "";
  border-bottom: 1px solid rgb(101, 101, 101);
  display: block;
  position: relative;
}
<div><span class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</span>
</div>

user_164963570

A span is an inline element while div is a block element.

Block elements are a rectangle and have a border and float properties. Inline elements do not have a border.

You can turn a span into a block element via css using display:inline-block / display:block property.

user_180357970

As you might know block, p, etc are block level elements (consists 100% width) and span is inline element (consists space whatever it may require). so you may use below changes for your code,

body {
  background-color: lightblue;
}

div {
  display: block;
}

.line {
  width: 100%;
  word-break: break-all;
  border-bottom: 1px solid rgb(101, 101, 101);
}
<span class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</span>

user_182404330
Related