13

我想以图片中显示的格式重新调整文本区域的标签大小。我正在尝试使用段落标签进行 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>

期望的输出..

照片png图片

4

7 回答 7

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

将它放在您的标签标签中，并根据您的需要调整最大宽度或最小宽度。提示在 IE 中不起作用

于 2013-05-17T11:59:02.607 回答
13

尝试white-space: normal;

欲了解更多详情，请访问 http://www.w3schools.com/cssref/pr_text_white-space.asp

于 2015-01-22T12:49:46.587 回答
7

这是解决方案。

的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-17T11:21:42.217 回答
3

像这样的东西：

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

演示

于 2013-05-17T11:19:44.473 回答
1

在您的 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-17T11:29:51.430 回答
0

您希望以一种独立的、防弹的方式来设置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-17T11:38:28.330 回答
-1

尝试在标签标签中使用 textWrap="true" 属性

例如：

<Label text="A very long text like this should be wrapped to next line"  textWrap="true"></Label>
于 2017-04-21T23:09:37.963 回答