所以我对Django有点奇怪的情况。我需要为行复制旧的工作表单行,但无论是否有文本,都需要对某些字段进行完全加下划线。
对于可视化,请参阅“上述员工的技能和知识已得到客观评估......”字段found here。
如何在带下划线的部分添加{{data}}?这里出现的另一个复杂问题是,每次到达行尾时都需要换行。
我最好的猜测是,可能会以某种方式使用带有底部边框的表格,但这会使段落的末尾包装非常困难。
任何帮助或建议将不胜感激!
我得到了投票,我的问题最初有点模糊,所以这里有一个更简单的解释。 我需要一个总是有6行的部分,所有部分都加下划线,并且{{data}}可以插入其中。这也需要包装友好。
我找到了实现这个目标的方法。这是一个丑陋的解决方案,但我解析了{{data}}并根据数据的长度添加了动态数量的带下划线的空格。
答案 0 :(得分:1)
不太确定,但是,您可以使用背景绘制点并将其放置在一个令人满意的跨度上。的 DEMO 强>
HTML
<form>
<fieldset>
<legend>Fill in Form</legend>
<p>
<label>What do you expect ?</label>
<span contenteditable="true" ></span>
</p>
</fielset>
</form>
CSS
form {
margin:2em;
padding:1em;
}
label, span , legend{
background:white;
padding:0 0.25em;
}
p {
min-height:6em;/* tune for number of empty lines to show */
background:linear-gradient(45deg, transparent 95%, black 95%) 0 -0.2em white;
background-size:0.25em 1.2em;
}
span[contenteditable]:empty:before {/* role="placeholder" */
content:"Tell us all about It ! (5 lines or more)";/* your own text of course */
font-style:italic;
color:gray;
padding:0 1em;
position:relative;
margin-right:-100%; /* keeps dot being seen underneath, avoids span background being drawn */
}
答案 1 :(得分:1)
它并不完美,但它有效 - 您可能想稍微调整一下以获得准确的值:
.text
{
line-height: 2.0em;
height: 12.0em;
width: 100%;
background-image: repeating-linear-gradient(
180deg,
transparent,
transparent 1.95em,
rgb(100,100,100) 2.0em
);
}
答案 2 :(得分:0)
如果我理解你的问题 - 只需将{{data}}包装在div中间,并在中间添加vertical-align,然后添加一个底部边框和一些填充。将其全部包裹在具有线高的容器中。我掀起了一个小提琴来说明。
.middle {
border-bottom: 1px solid black;
display: inline-block;
padding: 0 15px 5px 15px;
}