標籤文本在文本區域中的文字換行

我想重新調整圖片中顯示的格式的文本區域的標籤。我嘗試使用段落標籤來執行worp，但沒有發生。標籤文本在文本區域中的文字換行

我的代碼....

<label for="qual">This is the format i want the text-area to be displayed:</label> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea><br><br>

所需的輸出..

photo png image

來源

2013-05-17 Lucy

事情是這樣的：

label { 
    float: left; 
    width:120px; 
    padding:10px 30px; 
    font-weight:bold; 
}

Demo

來源

2013-05-17 11:19:44 Xareyo

如何將此標籤放在textarea的左側？ – Lucy

謝謝它的作品!!!它會在不同大小的屏幕上工作，如13英寸，20英寸和24英寸的屏幕，而不會從文本區域的左側改變它的位置??我想在表單中使用它，所以我希望表單元素相對於另一個具有固定的位置...... – Lucy

這裏是Solution。

的HTML：

<label for="qual" class="abc">This is the format i want the text-area to be displayed:</label> 
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>

的CSS：

.abc{float:left; width:125px; text-align:left; margin-right:30px;}

如果你不想創建一個類，你可以應用樣式上label在CSS。

希望這會有所幫助。

來源

2013-05-17 11:21:42 Nitesh

您不需要聲明'display：inline'，因爲它將被計算爲阻塞，因爲元素是浮動的。見http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo –

是的。我看到了規範。採取的點。更新小提琴 - http://jsfiddle.net/CRMhf/1/ - @MarcAudet – Nitesh

在HTML的塊添加：

<style> 
    label { padding:5px; font-weight:bold; float:left; width:150px; } 
</style>

的樣式設置上面也將取代間距：

<label for="qual">This is the format i want the text-area to be displayed:</label> 
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>

來源

2013-05-17 11:29:51 suspectus

你想樣式在自我的label和textarea元素包含防彈的方式。

我建議以下HTML：

<div class="wrap"> 
    <label for="qual">This is the format...to be displayed:</label> 
    <textarea id="qual" rows="5" cols="50" style="resize:none" 
       placeholder="Description and Qualification"></textarea> 
</div>

與下面的CSS：

.wrap { 
    outline: 1px dotted blue; /* Just for demonstration... */ 
    overflow: auto; 
} 

.wrap label { 
    outline: 1px dashed blue; 
    float:left; 
    width: 10em; 
    margin-right: 1.00em; 
}

定義父容器div.wrap持有兩個子元素，並指定overflow: auto生成一個新的塊格式化的內容。

您希望這樣做以確保浮動標籤字段不會影響頁面或窗體中可能存在的任何其他相鄰元素。如果您正在構建響應式設計，這可能很重要。

<label>字段向左浮動，您必須指定合適的寬度。您也可以根據需要應用邊距，背景顏色或圖像，填充以創建所需的設計。

小提琴：http://jsfiddle.net/audetwebdesign/2sTez/

來源

2013-05-17 11:38:28

我該如何將這個標籤放在textarea的左側？ – Lucy

我用演示靈活設計的第二個示例更新了小提琴/演示。標籤和textarea元素的寬度相對於父元素的寬度縮放。您可以通過改變窗口寬度來查看效果。 –

關於13/20/24英寸屏幕，結果將因您網頁的整體寬度而異。但是，靈活的版本（示例2）將適用於各種窗口大小。您可能需要根據您的總體設計指定「最小寬度」或「最大寬度」值。 –

style="max-width: 140px; word-wrap: break-word"

這個地方你的標籤標記和調整最大寬度或最小寬度您的需求。擡起頭來不能在IE

來源

2013-05-17 11:59:02 GertV

工作嘗試white-space: normal;

欲瞭解更多詳情，請訪問 http://www.w3schools.com/cssref/pr_text_white-space.asp

來源

2015-01-22 12:49:46

嘗試在標籤標記

例如使用textWrap = 「true」屬性：

<Label text="A very long text like this should be wrapped to next line" textWrap="true"></Label>

來源

2017-04-21 23:09:37

標籤文本在文本區域中的文字換行

回答

相關問題