Wrap the textarea around a HTML element

问题

Is there any way I can wrap a textarea HTML element around a HTML element? In my case I want to wrap the textarea around the label.

This is what I try to achieve:

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

Where the * is the text area.

回答1:

You can't use HTML tags inside <textarea> but you can use absolute positioning to place the label at the desired position.

Then, you can use the CSS text-indent property (more info on MDN) to offset the first line of the textarea so the label doesn't overlap it.

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>

回答2:

You could try to place the label in a div element, make the div editable and make the label un-editable ...

Something like this:

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

After that you just need to arrange your label and div with css and use the information inside the div (excluding the label) as the text inside a textbox.

Here's a jsfiddle to take a look at how it would work.

回答3:

I am not sure how well the text-indent property works on textarea elements. If it works well enough, you can do this:

Align the label with top-left corner of textarea using positioning and set a fixed width
Use text-indent property to indent the first line of text in textarea

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

回答4:

Use the text-indent Property. Modify the text-indent value as per your requirement.

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

OUTPUT

来源：https://stackoverflow.com/questions/24158683/wrap-the-textarea-around-a-html-element

标签

html

css

textarea