这是我想要实现的小提琴:演示
.editable-field {
display: block;
justify-content: inherit;
width:100%;
height:100%;
}
.editable-input {
border: none;
font-size: inherit;
background: inherit;
color: inherit;
transition: 0.3s all linear;
width:100%
height:100%;
}
即使宽度和高度为 100%,输入似乎也不会沿单元格拉伸。
我有一个表格,如果文本很长,单元格会垂直扩展(这就是我想要的)。问题是,如果我想拥有可编辑的单元格(例如演示中的第三个单元格),输入是静态的,不会随着文本"增长"。有没有一种仅限 css 的方法,或者 J-Query 来解决这个问题?
以下解决方案可能适合您。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<div class="container">
<table>
<tr>
<td>Not Editable but very long and takes fffffffffffffff multiple lines</td>
</tr>
<tr>
<td>Not Editable</td>
</tr>
<td contenteditable >
asdfad
</td>
<tr>
<td>Not Editable</td>
</tr>
</table>
</div>
我使用了内容可编辑。这是 html5 功能。