Html 文本区域中标签文本的自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16607619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Word-wrap of Label text in text-area
提问by Lucy
I want to re-size the label of a text-area in format shown in the picture.I"m trying to do worp using paragraph tag but it is not happening..
我想以图片中显示的格式重新调整文本区域的标签大小。我正在尝试使用段落标签进行 worp 但它没有发生..
my code....
我的代码....
<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><br><br>
Desired Output..
所需的输出..
回答by GertV
style="max-width: 140px; word-wrap: break-word"
place this in your label tag and adjust the max-width or min-width to your needs. heads up doesn't work in IE
把它放在你的标签标签中，并根据你的需要调整最大宽度或最小宽度。抬头在 IE 中不起作用
回答by Bandula Dharmadasa
Try white-space: normal;
尝试 white-space: normal;
For more details visit http://www.w3schools.com/cssref/pr_text_white-space.asp
有关更多详细信息，请访问 http://www.w3schools.com/cssref/pr_text_white-space.asp
回答by Nitesh
Here is the Solution.
这是解决方案。
The HTML:
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>
The CSS:
CSS：
.abc{float:left; width:125px; text-align:left; margin-right:30px;}
If you dont want to create a class, you can apply the styles on labelin the CSS.
如果不想创建类，可以label在 CSS 中应用样式。
Hope this helps.
希望这可以帮助。
回答by Xareyo
回答by suspectus
In the block of your HTML add:
在您的 HTML 块中添加：
<style>
label { padding:5px; font-weight:bold; float:left; width:150px; }
</style>
The style settings above will also replace the spacing:
上面的样式设置也将替换间距：
<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>
回答by Marc Audet
You want to style the labeland textareaelements in a self-contained, bullet-proof manner.
您希望以一种独立的、防弹的方式设置label和textarea元素的样式。
I suggest the following HTML:
我建议使用以下 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>
with the following CSS:
使用以下 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;
}
Define a parent container div.wrapto hold the two child elements and specify overflow: autoto generate a new block formatting context.
定义一个父容器div.wrap来保存两个子元素并指定overflow: auto生成一个新的块格式上下文。
You want to do this to make sure that the floated label field does not interfere with any other adjacent elements that may be in the page or form. This may be important if you are building a responsive design.
您希望这样做以确保浮动标签字段不会干扰页面或表单中可能存在的任何其他相邻元素。如果您正在构建响应式设计，这可能很重要。
The <label>field is floated left and you must specify a suitable width. You can also apply margins, background color or images, padding as needed to create the design that you need.
该<label>字段向左浮动，您必须指定合适的宽度。您还可以根据需要应用边距、背景颜色或图像、填充来创建您需要的设计。
回答by Sachidananda Naik
Try using textWrap="true" attribute in the Label tag
尝试在 Label 标签中使用 textWrap="true" 属性
for example:
例如：
<Label text="A very long text like this should be wrapped to next line" textWrap="true"></Label>
