我想创建在Django一个完整的文本。该间隙应显示多少个字母失踪。例如:这是一个例子。我会sh_ _你我me_ _。
我发现codepen一些有用的CSS-片段。我试着玩它,并使用字母而不是数字,改变字体的Segoe UI。我的问题是,下划线不与信了,当我使用的Segoe UI同步。如何我一定要改变配置,以便它可以再次顺利适应?
我SCSS代码:
$char-w: 1ch;
$gap: .5*$char-w;
$n-char: 7;
$in-w: $n-char*($char-w + $gap);
input {
display: block;
margin: 2em auto;
border: none;
padding: 0;
width: $in-w;
background: repeating-linear-gradient(90deg,
dimgrey 0, dimgrey $char-w,
transparent 0, transparent $char-w + $gap)
0 100%/ #{$in-w - $gap} 2px no-repeat;
font: 5ch Segoe UI; /*That's the attribute i changed*/
letter-spacing: $gap;
&:focus {
outline: none;
color: dodgerblue;
}
}
我的HTML代码:
<input maxlength='7' value=''/>
出现这种情况的原因是,您使用的是不是monospaced
字体(字母有各自的宽度)。如果更改字体font-family: monospace;
它会工作。
这里是使用Ubuntu一个例子:
@import url("https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono");
body {
font: 1.2rem 'Ubuntu', sans-serif;
}
input {
display: inline-block;
margin: 1.2rem auto;
border: none;
padding: 0;
width: 10.5ch;
background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/ 10ch 2px no-repeat;
font: 1.2rem 'Ubuntu Mono', monospace;
letter-spacing: 0.5ch;
}
input:focus {
outline: none;
color: dodgerblue;
}
Lorem ipsum <input maxlength='7' value=''/> dolor sit amet