html - 在文本区域文本到达另一个元素之前将其打断

Question

我有一个文本区域，我希望文本在它与作为我的 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;
}

给不懂的 friend 上个图

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>