Tekstili bir HTML öğesinin etrafına sarın

Question

Bir HTML öğesinin etrafında bir textarea HTML öğesini sarmanın bir yolu var mı? Benim durumumda, textarea'yı etiketin etrafına sarmak istiyorum. * Metin alanını olduğu

Label name: ********* 
********************* 
********************* 

:

Bu benim ulaşmak için deneyin şeydir.

Answer 1

<textarea> içindeki HTML etiketlerini kullanamazsınız, ancak etiketi istenen konuma yerleştirmek için mutlak konum belirleme kullanabilirsiniz. Etiket bunu örtüşmeyen böylece

Ardından, textarea ilk satırını dengelemek için CSStext-indent özelliği (more info on MDN) kullanabilir.

div { 
 
    position: relative; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border: 1px solid #000; 
 
    width: 115px; 
 
    line-height: 1em; 
 
} 
 

 
textarea { 
 
    text-indent: 120px; 
 
    margin: 0; 
 
    line-height: 1.2em; 
 
}

<div> 
 
    <label>This is the label :</label> 
 
    <textarea cols="30" rows="10"></textarea> 
 
</div>

Answer 2

Sen, bir div öğesi etiketi yerleştirmek div düzenlenebilir yapmak ve etiketi un-düzenlenebilir yapmak için deneyebiliriz ... böyle

şey: Sadece ihtiyaç Bundan sonra

<div onClick="this.contentEditable='true';"> 
    <label onClick="this.contentEditable='false';">text 1</label> 
    text 2 
</div> 

etiketinizi ve divunuzu css ile düzenleyin ve div içindeki bilgileri (etiket hariç) bir metin kutusunun içindeki metin olarak kullanın.

İşte nasıl çalışacağına bir göz atmak için bir jsfiddle.

Answer 3

Ben text-indent mülkiyet textarea elemanlarında ne kadar iyi çalıştığını emin değilim. textarea metnin ilk satırına girinti için sabit genişlikli

Kullanım text-indent özelliği

• konumlandırmayı kullanarak textarea sol üst köşesi etiketi hizalayın ve set: Bu yeteri kadar iyiyse, bunu yapabilirsin

Demo here

<div class="position-helper"> 
    <label>Label name:</label> 
    <textarea></textarea> 
</div> 

.position-helper { 
    position: relative; 
} 
.position-helper label { 
    position: absolute; 
    left: 1px; 
    top: 1px; 
    background-color: #F0F0F0; 
    /* font-size normalized so that em values match */ 
    font-size: 16px; 
    width: 10em; 
} 
textarea { 
    box-sizing: border-box; 
    margin: 0; 
    width: 100%; 
    /* font-size normalized so that em values match */ 
    font-size: 16px; 
    text-indent: 10em; 
} 

Answer 4

Us e text-indent Mülk. Gereksiniminize göre text-indent değerini değiştirin.

HTML:

<div> 
    <label><b>Label name:</b></label> 
    <textarea name="textarea1" id="" cols="30" rows="10" placeholder="PlaceHolder Text For the Text Area"></textarea> 
</div> 

CSS:

div 
{ 
    position:relative; 
} 
label { 
    position:absolute; 
    top:0; 
    left:0; 
    border:0; 
} 
textarea { 
    text-indent:90px; 
    margin:0; 
    border:1px solid blue;  
} 

ÇIKIŞ