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

I have this simple html:

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

<div>
  <span >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:

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)

EDIT 1

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

CodePudding user response：

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 >atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque</span><span > quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae</span><span > 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 >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>

CodePudding user response：

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 >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 >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>

CodePudding user response：

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.

CodePudding user response：

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 >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>