用星号填写DIV＆打印

我想知道是否有办法，如果有，我怎么能有一个充满星号（*）的div而不知道它的确切宽度，但我想保留它在单行上（如边框）。用星号填写DIV＆打印

我知道最好的方法之一是有一个星号图像和使用此图像设置我的DIV的边界，但在我的情况下，这是不可能的，因为我想只有一个HTML页面，并且没有链接的图像。

那么，我怎么能有一个完整的DIV填充“*”（星号），并有这种DIV宽度不固定？

编辑

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

来源

2015-06-23 Simon Dugré

你可以使用CSS吗？ – howderek

是的，CSS和JavaScript（如果可能，没有JavaScript，但如果没有其他可能的话，JavaScript可以是一个选项） –

我不清楚填补一个div，并保持在一个单一的行部分。 – j08691

如果唯一的问题是避免外部文件，那么使用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>

来源

2015-06-23 19:04:19

反正有没有另外一种方式？因为，我知道它可以在图像结束之前的页面停止的情况下在中间分割图像... –

由于我猜这是纯粹的装饰，使用图像可能会比填充实际星号 – Jan

@SimonDugré更好，因为它不是一个外部图像，因为它是非常小，我想不出一种方法来停止其载入.. –

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

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简洁，但它可以很容易地翻译成香草的JavaScript。

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

来源

2015-06-23 19:12:10 Mike

这可能是我唯一的选择，因为我的页面必须打印并以此方式进行打印，这使得它们的打印与@ GabyakaG.Petrioli的答案相反。 –

虽然测量似乎很少出现错误，但您也可以修改代码，以便在循环中填充div并在同一个循环中检查其大小。一旦它的高度增加，就意味着星号太多了，你可以退出循环并删除最后一个星号。不知道这会看起来多么优雅，我目前正在一个ipad上，所以试图在一个小提琴中尝试它显得太复杂了。 –

用星号填写DIV＆打印

回答

相关问题