Question

我需要用破折号填充空格。让我们说我有文字说“更多新闻”，这个文本是正确的。但是，我需要破折号在这个单词的前面，从行的开头到单词的开头。你能给我发一个最清晰，最简单的方法吗？我已尝试过边框，但我认为它有点复杂，更容易就会更好。它也应与大多数浏览器兼容（如果可能，包括IE6）

到目前为止，这是我的HTML：

<div>
      <div class="dashes"></div>
      <div class="more-news">Viac noviniek</div>
</div>

这是我的CSS

div.dashes{
    float:left;
    border-bottom: 2px dashed #dd0c0c;
}
div.more-news{
    float:right;
    font-family:Verdana, Geneva, sans-serif;
    font-weight: bold;
    font-style: italic;
    color: #dd0c0c;
    text-transform: uppercase;
}

先谢谢

Answer 1

您需要的是领导者。

在CSS3中有一个特殊的属性（参见：http://www.w3.org/TR/css3-gcpm/#leaders），但在任何浏览器中都没有实现。

所以我做了CSS2-hackaround，你可以在http://jsfiddle.net/zWWdZ/

上查看

.your-div {
    white-space: nowrap;
    position: relative;
}
.your-span:before {
    content: "------------------------------------------------------------------------------------------------------------------------------------------------------";
    overflow-x: hidden;
}

.your-span {
    position: absolute;
    right: 0;
}

基于伪元素“之前”的解决方案，内容非常长并且应用了overflow-x：hidden。

CSS用破折号填充空格

1 个答案: