set*_*tec 5 html css css-shapes
我需要一个带有嵌入式按钮的文本区域字段,如下图所示:
__________________________________
|Lorep ipsum lorep ipsum lorep ipsu|
|m lorep ipsum lorep ipsum lorep ip|
|sum lorep ipsum lorep ip _________|
|sum lorep ipsum lorep ip| OK |
|________________________|_________|
文本应该围绕按钮流动,而不是隐藏在按钮下面.
我能想象的唯一选择是SVG带有文本和用户操作处理程序的自定义组件,但这似乎有点矫枉过正.
有关这项任务的简单(可能不完美)方法的任何建议吗？
我完全不喜欢客户端的东西，但这似乎是可能的contenteditable。
.input {
width: 300px;
}
.submit {
border: 1px solid black;
float: right;
text-align: center;
padding: 10px;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='input' contenteditable=true>
<div type='button' class='submit' contenteditable=false>Save</div>
The text should flow around the button, without being hidden under it.
The only option I could imagine is custom SVG component with text and user action handlers, but that seems to be a bit overkill.
Any suggestion on simple (may be not perfect) approach for this task?
</div>
</body>
</html>