span元素的完整邊框長度與span元素中的文本無關

我有這個簡單的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>

我目前擁有的是這樣的：

但我想要的是邊框覆寫每行的整個長度，無論文本如何。像這樣的東西：

（把3條紅色波浪線當作3條黑色直線哈哈）

編輯 1

從提供的答案。我在這里看到一條雙線..

uj5u.com熱心網友回復：

如果你想使用 span，你需要像這樣分開它：

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

但如果你愿意使用<p>標簽，你可以這樣做：

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

uj5u.com熱心網友回復：

您當前的代碼段顯示了帶有邊框底部的跨度上的標準行為。你可以用 a 來做span，但是當單詞中斷時，邊框也會中斷。您可以添加word-break: break-all;到您的跨度，然后將border-bottom也添加到 div，這樣底部始終帶有 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>

解決方案#2 ~ 沒有雙線。

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

uj5u.com熱心網友回復：

Aspan是行內元素，div而是塊元素。

塊元素是一個矩形，具有邊框和浮動屬性。行內元素沒有邊框。

您可以使用display:inline-block/display:block屬性通過 css 將跨度轉換為塊元素。

uj5u.com熱心網友回復：

您可能知道 block、p 等是塊級元素（由 100% 寬度組成），而 span 是行內元素（由可能需要的空間組成）。因此您可以對代碼使用以下更改，

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>

標籤：html css

上一篇：更改日期選擇器中的日期格式

下一篇：無法洗掉CSV中Pandas Gibberish輸出中的空白空間