Question

我需要在文字后面加一条虚线。虚线应该直到行尾。在下面的示例中，在组织/机构文本之后，虚线应该开始并且应该持续到行的结尾。同下面的代码，我在文本下面也是虚线，这不是我想要的。

Organisation/Agency.................................................

我尝试如下。

.horizontal_dotted_line {
  border-bottom: 1px dotted black;
  width: 200px;
}

<div class="horizontal_dotted_line">
  Organisation/Agency
</div>

但我得到的输出是

Organisation/Agency
.................................................

我需要的输出是组织/机构........................................

Answer 1

＆＃13;

.horizontal_dotted_line{
     width: 200px;
     display : flex;
    } 
    .dot{
      flex: 1;
      border-bottom: 1px dotted black;
      height: 0.6em;
    }

＆＃13;

<div class="horizontal_dotted_line">Organisation/Agency<span class="dot"></span></div>

＆＃13;

Answer 2

您可以将[^>]伪元素用于虚线，并在父元素上设置:after。对于伪元素display: flex，它将占用剩余的自由宽度。

＆＃13;

flex: 1

＆＃13;

.horizontal_dotted_line {
  display: flex;
  width: 300px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding: 5px;
} 
.horizontal_dotted_line:after {
  border-bottom: 1px dotted black;
  content: '';
  flex: 1;
}

＆＃13;

Answer 3

非常简单。伪：后元素。

＆＃13;

div {
  display: flex;
  width: 300px;
}

div:after {
  border-bottom: 1px dotted black;
  content: '';
  flex: 1;
}

＆＃13;

<div>
  Organisation/Agency
</div>

＆＃13;

Answer 4

这是最好的方法，试试这个。

＆＃13;

.horizontal_dotted_line {
    position: relative;
}
.horizontal_dotted_line span {
    display: inline-block;
    background: #fff;
    position: relative;
    z-index: 1;
}
.horizontal_dotted_line:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: -1;
    border-top: 1px dotted black;
}

＆＃13;

<div class="horizontal_dotted_line">
  <span>Organisation/Agency</span>
</div>

＆＃13;

如何在文字后添加虚线？

4 个答案: