所以我有一個與Django奇怪的情況。我需要複製一箇舊的工作表單行來排隊，但是一些字段需要完全加下劃線，不管是否有文本。強調整個部分不管文字

對於可視化，請參閱「上述員工的技能和知識已經客觀評估...」字段found here。

如何在加下劃線的部分添加{{數據}}？這裏出現的另一個複雜情況是每次到達行尾時都需要換行。

我最好的猜測是可以用某種方式使用帶有底部邊框的表格，但是這會使段落在行尾換行非常困難。

任何幫助或建議將不勝感激！

編輯澄清：

我得到downvoted，我的問題是，原本有點含糊所以這裏有一個簡單的解釋。我需要一個總是有6行的部分，所有部分都有下劃線，並且可以在其中插入{{data}}。這也需要文字包裝友好。

和最後一個編輯...

我找到了一種方法來實現這一點。這是一個難看的解決方案，但我解析了{{data}}，並根據數據的長度添加了一個動態的帶下劃線的空格。

來源

2014-06-26 Greg

你僅限於使用CSS，或者你打算使用jquery嗎？（或者，看看這是否有幫助：http://jsfiddle.net/microbians/csYjC/） – karthikr

我也絕對向jQuery開放。儘管你的jsfiddle沒有強調任何內容。 – Greg

這不是我的小提琴。只是發現，如果你正在尋找一個CSS唯一的解決方案。 – karthikr

如果我正確理解你的問題 - 只需在中間垂直對齊的div中包裝{{數據}}並添加底部邊框和一些填充。將它全部包裝在一個線高的容器中。我掀起一個小提琴來說明。

.middle { 
    border-bottom: 1px solid black; 
    display: inline-block; 
    padding: 0 15px 5px 15px; 
}

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

來源

2014-06-26 16:05:43 rihardsp

我明白如何給一個部分加下劃線。我需要一個總是有6行的部分，所有部分都加下劃線，並且可以在其中插入{{data}}。 – Greg

不太清楚，但是，你可以使用一個背景繪製點打下了它CONTENTEDITABLE跨度。 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 */ 
}

來源

2014-07-03 21:26:31

不要忘記，跨度不是一個輸入也不是一個textarea，你需要一個JavaScript支持來生成這個跨度並將其綁定到一個textarea –

我其實已經嘗試去背景線路線。不幸的是，我使用的PDF渲染器與背景圖片不兼容。我發現了一種通過向字符串附加動態數量的空格來做到這一點的方法。我會獎勵你的賞金，因爲你的答案是最好的潛在解決方案。 – Greg

謝謝你，祝你好運 –

它並不完美，但它的工作原理 - 你可能要與這個搗鼓一點得到確切值：

.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 
    ); 
}

來源

2014-07-03 22:14:39 cprn

強調整個部分不管文字

編輯澄清：

和最後一個編輯...

回答

相關問題