Html 如何将div添加到文本区域的右上角，并使文本在div之后开始（图中）

因此，用户可以键入激活“回复”模式的命令。如何在用户文本开始后的文本区域的左上角设置徽章/div/label/etc

这里是一个糟糕的表示，如果我想实现的话（这是绝对定位的，文本有一堆空格，所以不是真正的解决方案，仅举一个例子）

为您制作的代码：

您只需使用

float

.container{
宽度：500px；
高度：150像素；
}
.里面{
背景色：红色；
宽度：60px；
高度：10px；
浮动：左；
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

在textarea中使用了CSS属性

.container{
位置：相对位置；
}
.里面{
背景色：红色；
位置：绝对位置；
}
文本区
{
文本缩进：150px；
宽度：100%；
}

X回复@abc
益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

绝对定位标签和

文本缩进

在

文本区域

textarea{
文本缩进：150px；
线高：1.2米；
}
div{
显示：内联块；
位置：相对位置；
边缘：1米；
}
标签{
位置：绝对位置；
排名：0；
左：0；
宽度：145px；
高度：1.2米；
背景：浅灰色；
}

你的东西在这里
我爱你，我爱你，我爱你，我爱你，我爱你。建筑工程师实习，除此之外，还需要自然的外观和最小的体积？在脸上看不见的东西、眼睛里的东西、眼睛里的东西、眼睛里的东西、眼睛里的东西、眼睛里的东西、眼睛里的东西。
请尝试以下解决方案：

<div style="position:relative">
  <textarea style="height:150px; width:200px; text-indent: 85px">
  </textarea>
  <div style="position:absolute; height:20px; width:80px; background-color:gray; top:0px"></div>
</div>



此外，请注意：
文本缩进：85px
为了在div之后开始第一行
如果覆盖div的宽度不固定，多用一点Javascript即可：

$(function(){
    var $overlay = $('#widget #overlay'),
        $textarea = $('#widget textarea')
    ;
    $textarea.css({
        textIndent: $overlay.width() + 'px'
    });
});

HTML:

codepen：（为nice UI加载引导程序）
div不是
文本区域。
这非常接近我想要的。唯一的问题是当用户输入的文本超过textarea高度时，文本在div下滚动，我必须用JS来修复它
<div class="container">
    <div id="widget">
        <div id="overlay">Replying to @jimc sac as cas cac </div>
        <textarea class="form-control">Some dummy text Some dummy text Some dummy text Some dummy text Some dummy text Some dummy text</textarea>
    </div>
</div>

#widget{
    position: relative;
    border: 1px solid #CCCCCC;
}

#widget #overlay{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

#widget textarea{
    border: none;
    resize: vertical;
}