无论文本如何都强调整个部分

时间:2014-06-26 15:33:23

标签: html css underline

所以我对Django有点奇怪的情况。我需要为行复制旧的工作表单行,但无论是否有文本,都需要对某些字段进行完全加下划线。

对于可视化,请参阅“上述员工的技能和知识已得到客观评估......”字段found here

如何在带下划线的部分添加{{data}}?这里出现的另一个复杂问题是,每次到达行尾时都需要换行。

我最好的猜测是,可能会以某种方式使用带有底部边框的表格,但这会使段落的末尾包装非常困难。

任何帮助或建议将不胜感激!

编辑以澄清:

我得到了投票,我的问题最初有点模糊,所以这里有一个更简单的解释。 我需要一个总是有6行的部分,所有部分都加下划线,并且{{data}}可以插入其中。这也需要包装友好。

最后一次编辑......

我找到了实现这个目标的方法。这是一个丑陋的解决方案,但我解析了{{data}}并根据数据的长度添加了动态数量的带下划线的空格。

3 个答案:

答案 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;
}

http://jsfiddle.net/PkBb5/2/