我試圖找到一種在文本上加刪除線的方法，比如可以使用text-decoration屬性，但是我試圖讓這條線延伸到文本之外的封裝div的其余部分，而不僅僅是通過文本本身。

我已經(jīng)嘗試使用text-decoration屬性，調(diào)整文本對(duì)象的寬度，等等，但是沒有發(fā)現(xiàn)任何有效的方法。

您可以使用類似::after的偽元素來實(shí)現(xiàn)這一點(diǎn)，容器的位置應(yīng)該設(shè)置為相對(duì)的，偽元素的位置應(yīng)該設(shè)置為絕對(duì)的，以便它可以定位自己。

#container {
    position: relative;
  }

#container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  background: red;
}

<div id="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium modi distinctio quidem explicabo dolorum est exercitationem, sapiente reiciendis eveniet vitae vel id voluptatibus, ea quod maiores officia itaque, aliquam doloribus!
</div>

您可以用漸變來模擬這種情況:

p {
  font-size: 20px;
  background:
   linear-gradient(currentColor 2px,#0000 0) 
   0 .5lh/ /* position: 0 and 1/2 line height */
   100% 1lh; /* width:100% height: 1 line height*/
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget congue quam. Nam rhoncus consectetur ligula, ut congue eros malesuada sit amet. Sed mauris metus, venenatis sit amet pellentesque sed, fringilla et lectus. Nunc ultrices fringilla turpis, eu efficitur tortor imperdiet id. Sed elementum dignissim lacus, ut auctor mi finibus sit amet. Praesent fermentum feugiat erat quis consequat. Nam dictum sagittis odio at mattis. Donec at interdum elit, sit amet varius turpis. Curabitur iaculis vitae dui ut fringilla. Sed consequat velit id facilisis efficitur. Aenean ipsum urna</p>