Question

我想知道是否有方法，如果有的话，我怎么能在不知道其确切宽度的情况下使用星号（*）填充div，但我想将它保留在一行（如边框））。

我知道最好的方法之一就是使用这张图片制作星号图像并设置我的DIV的边框，但在我的情况下使用它是不可能的，因为我只想这样做有一个HTML页面，没有链接图像。

那么，我怎么能有一个完整的DIV充满＆＃34; *＆＃34; （星号）并且这个DIV宽度没有固定？

修改

此外，必须打印。因此，我必须忘记将星号图像设置为我的DIV背景的可能性，因为用户选项允许或不允许打印背景图像。

Answer 1

如果唯一的问题是避免使用外部文件，请使用data uri作为图片。

例如

div {
  height:14px;
  border-width:7px 0 0;
  border-style:solid;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAJFBMVEX///+KioowMDBAQEAMDAxiYmLm5ubMzMxQUFC2trYiIiIAAAA2IPbUAAAAAXRSTlMAQObYZgAAACVJREFUCB1jYAADLiDJNaOKgYEtpIGBgcO4mYGBk4kTKMjIwAAAMvcC1AqHZy8AAAAASUVORK5CYII=') 7 0 0 repeat;
}

<div class="asterisk"></div>

使用边框图像进行更新（打印）

div {
  height:14px;
  border-width:7px 0 0;
  border-style:solid;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAJFBMVEX///+KioowMDBAQEAMDAxiYmLm5ubMzMxQUFC2trYiIiIAAAA2IPbUAAAAAXRSTlMAQObYZgAAACVJREFUCB1jYAADLiDJNaOKgYEtpIGBgcO4mYGBk4kTKMjIwAAAMvcC1AqHZy8AAAAASUVORK5CYII=') 7 0 0 repeat;
}

<div class="asterisk"></div>

Answer 2

您可以尝试测量星号的宽度（称之为w），然后将div的宽度除以填充w，以查找要使用的星号数。 / p>

HTML：

<div id="calc-width" style="display: none">*</div>
<div id="fill" style="width: 150px; border: 1px solid black"></div>

JS：

var n = ~~($('#fill').width() / $('#calc-width').width());
var chars = Array(n + 1).join('*');
$('#fill').html(chars);

这可能容易出现一些错误，您需要对其进行全面检查。这里使用jQuery是为了简洁，但它可以很容易地翻译成vanilla javascript。

JSFiddle：https://jsfiddle.net/dvfcm1ud/1/

用星号填充DIV＆amp;打印

2 个答案: