Word-wrap của nhãn văn bản trong văn bản diện tích

Question

Tôi muốn tái kích thước nhãn của một khu vực văn bản theo định dạng được hiển thị trong hình ảnh. Tôi "cố gắng để làm worp bằng cách sử dụng thẻ đoạn nhưng nó không xảy ra ..

mã của tôi ....

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

mong muốn Output ..

Answer 1

Something như thế này:

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

Demo

Answer 2

Đây là 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;} 

Nếu bạn không muốn tạo ra một lớp, bạn có thể áp dụng các phong cách trên label trong CSS.

Hy vọng điều này sẽ hữu ích.

Answer 3

Trong khối HTML của bạn thêm:

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

Các thiết lập phong cách trên cũng sẽ thay thế   khoảng cách:

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

Bạn muốn tạo kiểu cho label và textarea yếu tố trong một tự chứa, cách thức chống đạn.

Tôi đề nghị HTML sau:

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

với CSS sau đây:

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

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

Xác định một thùng phụ huynh div.wrap để giữ hai phần tử con và chỉ định overflow: auto để tạo ra một bối cảnh khối định dạng mới .

Bạn muốn thực hiện điều này để đảm bảo rằng trường nhãn nổi không ảnh hưởng đến bất kỳ phần tử lân cận nào khác có thể có trong trang hoặc biểu mẫu. Điều này có thể quan trọng nếu bạn đang xây dựng một thiết kế đáp ứng.

Trường <label> được làm nổi bên trái và bạn phải chỉ định chiều rộng phù hợp. Bạn cũng có thể áp dụng lề, màu nền hoặc hình ảnh, đệm khi cần thiết để tạo ra thiết kế mà bạn cần.

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

Answer 5

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

nơi này trong thẻ nhãn của bạn và điều chỉnh max-width hoặc min-width yêu cầu của bạn. người đứng đầu lên không làm việc trong IE

Answer 6

Hãy thử white-space: normal;

Để biết thêm chi tiết chuyến thăm http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 7

Hãy thử sử dụng textWrap = thuộc tính "true" trong Label thẻ

ví dụ:

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