Javascript 如何重复一个点（“点”）字符（或任何其他字符），以使绘制的线条宽度填充屏幕宽度？_Javascript_Html_Css

Javascript 如何重复一个点（“点”）字符（或任何其他字符），以使绘制的线条宽度填充屏幕宽度？

javascript html css

Javascript 如何重复一个点（“点”）字符（或任何其他字符），以使绘制的线条宽度填充屏幕宽度？,javascript,html,css,Javascript,Html,Css,如何重复一个字符（比如a），使使用点绘制的线的宽度始终与屏幕宽度相同。我目前正在使用以下代码绘制点线： <label style="color:red">...........................</label> 。。。。。。。。。。。。。。。。。。。。。。。。。。。显然，在这种情况下，点的数量是固定的。我的目标是画一条与屏幕宽度匹配的线。我是网页设计的初学者；因此，任何帮助都将不胜感激。您走错了方向 <label style="color:red

如何重复一个字符（比如a），使使用点绘制的线的宽度始终与屏幕宽度相同。我目前正在使用以下代码绘制点线：

<label style="color:red">...........................</label>

。。。。。。。。。。。。。。。。。。。。。。。。。。。

显然，在这种情况下，点的数量是固定的。我的目标是画一条与屏幕宽度匹配的线。我是网页设计的初学者；因此，任何帮助都将不胜感激。

您走错了方向

<label style="color:red">...........................</label>

。。。。。。。。。。。。。。。。。。。。。。。。。。。

这不是画虚线的方式

它由虚线边框小提琴完成：


.点点{
边框底部：3个点红色；
}

//现在所有的行都可以供您选择。。。
//这是Html代码。您可以提供的文件名，如Borders.html
边界测试
这是实心边框
这是虚线边界
这是虚线边框
这是双重边界
这是槽边
这是山脊边界
这是边界
这是插图边框
//这是上面Html文件的Css代码。您可以将此文件的名称命名为Borders.css。
#坚实的
{
边框底部：2px纯黑；//这里您可以使用边框顶部、边框左侧、边框右侧来代替边框底部。
}
#点缀
{
底部边框：2件黑色虚线；
}
#冲刺
{
边框底部：2个黑色虚线；
}
#双重的
{
底边：2件双黑；
}
#沟槽
{
边框底部：2个黑色凹槽；
}
#山脊
{
边框底部：2倍脊黑色；
}
#开始
{
底部边框：2件黑色；
}
#插图
{
底部边框：2件黑色镶嵌；
}

您不能使一行字符的宽度与某些给定宽度完全相同，例如整个可用宽度，这可能就是您所说的“屏幕宽度”。但我认为你的意思是要求在可用空间的限制下，在一行上写尽可能多的“.”字符。约束实际上是父元素的宽度，因此我们可以通过反复添加“.”来实现这一点，直到超出该约束，然后后退一步：


var dots=document.getElementById（'dots'）；
dots.style.visibility='hidden'；
变量宽度，保存的内容；
做{
savedContent=dots.innerHTML；
dots.innerHTML+='；
}while（dots.offsetWidth

这不是a的用途。我如何确保它们在虚线的左右两侧都有一些空间？。我尝试在上面的css类中添加marginleft和marginright属性。奇怪的是，我能在线条左边留下空白；但不是在右边。这是我写的：。点着的{边框顶部：2px点着的红色；左边空白：50px；右边空白：50px；}看一下这个问题dep2k这并没有回答问题。诚然，它可能会回答一个本应被问到的更好的问题，但它也会被组织成有答案的问题。

<div class="dotted"></div>

.dotted{
    border-bottom:3px dotted red;
}

//Now All the lines is available for you whatever u can choose...

// This is Html Code. Name of this file u can give like Borders.html

    <html>
    <head>
        <title>
            Border Test
        </title>
        <link rel="stylesheet" href="borders.css" type="css/text"/>
    </head>
    <body>
        <h1 id="solid">This is solid Border</h1>
        <h1 id="dotted">This is dotted Border</h1>
        <h1 id="dashed">This is dashed Border</h1>
        <h1 id="double">This is double Border</h1>
        <h1 id="groove">This is groove Border</h1>
        <h1 id="ridge">This is ridge Border</h1>
        <h1 id="outset">This is outset Border</h1>
        <h1 id="inset">This is inset Border</h1>
    </body>

</html>

//This is Css code for the above Html file. You can give the name of this file as Borders.css.

#solid
{
    border-bottom:2px solid black; //here u can use border-top,border-left, border-right also instead of border-bottom.
}
#dotted
{
    border-bottom:2px dotted black;
}
#dashed
{
    border-bottom:2px dashed black;
}
#double
{
    border-bottom:2px double black;
}
#groove
{
    border-bottom:2px groove black;
}
#ridge
{
    border-bottom:2px ridge black;
}
#outset
{
    border-bottom:2px outset black;
}
#inset
{
    border-bottom:2px inset black;
}