Word-обтекание текста с надписью в текстовой области

Я хочу изменить размер метки в текстовой области в формате, показанном на рисунке. Я пытаюсь сделать 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>

Желаемый результат.

Ответ 1

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

поместите это в свой ярлык метки и настройте максимальную ширину или минимальную ширину в соответствии с вашими потребностями. Heads не работает в IE

Ответ 2

Вот Решение.

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.

Надеюсь, что это поможет.

Ответ 3

Что-то вроде этого:

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

Демо

Ответ 4

Попробуйте white-space: normal;

Подробнее http://www.w3schools.com/cssref/pr_text_white-space.asp

Ответ 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>

Ответ 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> плавает влево, и вы должны указать подходящую ширину. Вы также можете применить поля, цвет фона или изображения, заполнить по мере необходимости, чтобы создать необходимый вам дизайн.

Fiddle: http://jsfiddle.net/audetwebdesign/2sTez/

Ответ 7

Попробуйте использовать атрибут textWrap = "true" в теге Label

например:

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