2

问题。带半行的句子

在 HTML/CSS 中。

就像上传的图片一样，我想用线条填充一些单词后的空白。

单词的长度可以改变。

如果全宽是 1000px，字长是 100px，那么半行就是 900px 长。

而字是350px，那么半行就是650px-long。

我怎样才能通过 CSS 制作它？

请告诉我..

4

2 回答 2

1

希望这有帮助：D

h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}
<h2>Featured products</h2>

于 2020-02-13T05:26:00.937 回答
0

您可以使用网格轻松实现此目的 

.parent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

 .line{
    background:black;
    height:1px
}
<div class="parent">
  <div>My some text</div>
  <div  class="line"></div>
</div>

于 2020-02-13T05:26:08.827 回答