Question

我想以图片中显示的格式重新调整文本区域的标签。我正在尝试使用段落标签来执行操作，但它没有发生..

我的代码......

 <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

Answer 1

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

将其放在标签标签中，并根据需要调整最大宽度或最小宽度。抬头在IE中不起作用

Answer 2

这是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;}

如果您不想创建类，可以在CSS中的label上应用样式。

希望这有帮助。

Answer 3

尝试white-space: normal;

有关详细信息，请访问 http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 4

这样的事情：

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

Demo

Answer 5

在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>

Answer 6

您希望以自包含，防弹的方式设置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/

Answer 7

尝试使用textWrap =＆＃34; true＆＃34; Label标签中的属性

例如：

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

标签文本的自动换行在文本区域

7 个答案: