在遇到另一个元素之前打破textarea文本

Question

我有一个textarea，我希望文本在重叠表情符号图标之前中断，这是我的html文件中的一个按钮。我不希望它重叠它。我宁愿不给表情符号z-index，因为它会弄乱其他东西。

这是代码

HTML

<button class="emoji"></button>
<textarea rows="6" cols="60" class="divTxtArea" placeholder="Type a message.."></textarea>

CSS

.divTxtArea
{

    resize: none;
    font-family: "Open Sans";
    font-size: 1em;
    color:#8b959a;
    border-radius: 5px;
    border:1px solid #e1e4e6;
    width:580px;
    padding:15px 20px;
    height:180px;
    max-height:180px;
    overflow-y:scroll;
    outline: none; 
    resize:none!important;
}

div .emoji
{
    position:absolute;
    left:80%;
    margin-top:10px;
    display:inline-block;
}

这是一张不懂的人的照片

Answer 1

试试这个

.divTxtArea
{

    resize: none;
    font-family: "Open Sans";
    font-size: 1em;
    color:#8b959a;
    border-radius: 5px;
    border:1px solid #e1e4e6;
    width:580px;
    padding:15px 20px;
    height:180px;
    max-height:180px;
    overflow-y:scroll;
    outline: none; 
    resize:none!important;
}

.divTxtArea .emoji
{
    float: right;
    margin-top:10px;
    display:inline-block;
}

.divTxtArea textarea {

  border: none;
  width : 95%;
  height: 100%;
  
}

<div class="divTxtArea">
  <button class="emoji"></button>
<textarea rows="6" cols="60" placeholder="Type a message.."></textarea>
  </div>

Answer 2

这个怎么样？伪元素before应该是您的表情符号图标。

＆＃13;

＆＃13;

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 100px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

#textarea:before {
  content:'';
  height:40px;
  width:40px;
  float:right;
  background-color:red;
}

＆＃13;

<div id="textarea" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt et sem eget imperdiet. Vivamus id sollicitudin urna. Proin nec libero ut justo egestas fringilla ut eu diam. Ut congue, felis in pulvinar lacinia, metus diam mollis dolor, et semper tortor purus vitae felis. Aenean lorem elit, ultricies dignissim dolor.</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用

textarea {
resize: none;
}

在你的CSS中

。