偏移文本区域的文本换行，使文本不会被图标遮挡

Question

我正在 HTML 开发聊天应用程序。要键入消息，用户键入 <textarea>。为了帮助指示文本区域的用途并提高可用性，在 <textarea> 顶部有一个发送消息的按钮。但是，当用户键入较长的消息时，文本会到达行尾并被图标部分覆盖。虽然有 CSS 属性可以控制文本换行的行为，但我找不到任何东西可以 'offset' 文本换行，以便新文本在到达图标后会换行。是否有 CSS 属性或 JS 解决方法可以实现此目的？

Answer 1

padding-right 似乎是要走的路。是这样的吗？

.wrapper {
    position: relative;
    display: inline-block;
}
textarea {
    padding-right: 20px;
}
button {
    position: absolute;
    top: 0;
    right: 0;
}

<div class="wrapper">
    <textarea rows="7" cols="40"></textarea>
    <button>B</button>
</div>

偏移文本区域的文本换行，使文本不会被图标遮挡

Offset the text wrap of a textarea so text isn't obscured by icon

html

css

textarea

word-wrap