主页 / 问题 / 747622
Accepted
andreymal
Asked:2020-11-21 20:13:25 +0000 UTC2020-11-21 20:13:25 +0000 UTC

全角行分隔符

  • 772

有一项任务是在页面的整个宽度上添加行之间的分隔符。

似乎<hr/>应该设置所有内容，但细微差别是浏览器会根据窗口的宽度（自动换行）自动换行我的行，并且行数和它们分开的确切位置事先不知道. 但是你仍然需要分享。

如何在纯 HTML 和 CSS 中制作这样的分隔符？

它不仅仅是在文字下划线，所以它text-decoration不适合这里。（虽然如果调整它以获得正确的结果是现实的，我不介意）

html

2 个回答

  1. Best Answer

    可以通过linear-gradient. 你只需要适应 line-height。下面是一个例子 line-height: 16px。

    div {
  background: -moz-linear-gradient(transparent 15px, red 1px);
  background: -webkit-linear-gradient(transparent 15px, red 1px);
  background: -o-linear-gradient(transparent 15px, red 1px);
  background: -ms-linear-gradient(transparent 15px, red 1px);
  background: linear-gradient(transparent 15px, red 1px);
  
  line-height: 16px; 
  background-size: 100% 16px;
}
    <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

    • 2

  2. 有一个拐杖：我们将每个单词包装进去<span>并添加一个:after具有绝对定位的元素。诚然，一条线内会得到几条（十条）这样的线，但它们会相互重叠，看起来就像一条线。但是，这会阻止使用透明度、间隙和其他装饰物，因此此选项的适用性受到限制。

    html, body {
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    font-family: 'PT Sans', Arial, sans-serif;
    font-size: 26px;
    text-align: center;
}

div {
    overflow: hidden;
    margin: 16px auto;
    width: 269px;
    background-color: white;
    line-height: 1.5;
    padding-bottom: 8px;
}

span {
    position: relative;
}

span:after {
    position: absolute;
    left: -2999px;
    right: -2999px;
    bottom: -4px;
    height: 1px;
    background-color: red;
    content: '';
}
    <div><span>В </span><span>чащах </span><span>юга </span><span>жил </span><span>бы </span><span>цитрус? </span><span>Да, </span><span>но </span><span>фальшивый </span><span>экземпляр!</span></div>

    • -1

相关问题