如何在文本後添加虛線？

我需要文字後面的虛線。虛線應該直到行的末尾。在下面的示例中，在Organization/Agency文本之後，虛線應該開始，並且應該持續到該行的結尾。使用下面的代碼，我得到了文本下面的虛線，這不是我想要的。如何在文本後添加虛線？

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

我試了下面。

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

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

但我得到的輸出是

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

我所需的輸出是組織/機構............... .........................

來源

2017-04-25 ChinnaR

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

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

來源

2017-04-25 12:42:12

我有你的代碼的文字下方的虛線，我只需要在文本後的虛線。組織/機構............................................... .. – ChinnaR

@ChinnaR根據您的要求調整高度，並刪除'寬度：200px;'如果您想要全寬，否則取決於您的'寬度' –

刪除：「width：200px;」從horizontal_dotted_line並添加「寬度：100％;」到現在，它會運作良好;感謝您的解決方案！ – Pascut

您可以使用:after虛擬元素爲虛線，也可以在父元素上設置display: flex。在僞元素上有flex: 1，它將佔用剩餘的空閒寬度。

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

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

來源

2017-04-25 12:42:29

非常簡單。僞元素：後元素。

div { 
 
    display: flex; 
 
    width: 300px; 
 
} 
 

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

<div> 
 
    Organisation/Agency 
 
</div>

來源

2017-04-25 12:44:23

這影響了頁面上的所有div。 – ChinnaR

@ChinnaR使用彈性佈局。查看更新的代碼。希望能幫助到你。 –

這是最好的方法，嘗試了這一點。

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

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

來源

2017-04-25 13:04:05

組織/機構文本用虛線劃出 – ChinnaR

如何在文本後添加虛線？

回答

相關問題