Question

我希望创建一个结构，其中一个按钮与textarea的右上角对齐。我能够使用CSS定位来做到这一点。当我开始在textarea内部输入时，文本位于按钮下方。有没有办法使文本通常占据文本区域的整个宽度，但是在达到按钮的边界时，会被包裹到下一行？

Answer 1

始终可以选择在内联元素而不是<textarea>上使用contentEditable属性，并将其放在浮动按钮旁边。

HTML：

<div>
    <button>press me</button>
    <span contenteditable="true">editable</span>
</div>

CSS：

div {border: 1px solid gray; width: 15em; height: 5em; overflow-y: scroll;}
button {float: right;}

jsFiddle

Answer 2

假装。将textarea和按钮包裹在包含div中并定位元素。然后将容器div的样式设置为文本区域。这是一个粗略的样机http://jsfiddle.net/LEkAJ/

HTML

<div class="container">
  <button>Button</button>
  <textarea>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</textarea>
</div>

CSS

.container {
    position:relative;
    width: 300px;
    height: 100px;
    border: 1px solid #ddd;
}
button {
    position:absolute;
    top: 3px;
    right:3px;
    width: 60px;
}
textarea {
    position:relative;
    border:none;
    width:232px;
    height: 95px;
    resize: none
    outline: none; /* add this to stop highlight on focus */
}

Answer 3

我同意@Aprillion。这种方法会起作用。看看这个小提琴：http://jsfiddle.net/5pPRM/

HTML：

<p contenteditable="true">
<button onclick="alert($(this).parent().find('span').text());">hello</button>
    <span>
This is a paragraph. It is editable. Try to change this text. This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.
    </span>
</p>

CSS

p
{
position:relative;
}
button
{
position:relative;
float:right;
margin: 0 0 2% 0;
}

HTML中TextArea内的按钮

3 个答案: