Question

让我有以下代码http://jsfiddle.net/QhJWt/

<span contentEditable="true">asdfasdf </span>
span
{
    height:20px; 
    width:100px;
    border: 1px solid black;
}

我如何模仿文本框行为？即当文本长度超过宽度时，它不会调整大小。

Answer 1

将display:block添加到您的span元素，因为inline元素会忽略width和height属性。然后，添加word-wrap: break-word;，以获得所需的行为另外，将height更改为min-height，以便在必要时调整元素大小。
小提琴：http://jsfiddle.net/QhJWt/1/

span
{
    min-height:20px;
    width:100px;
    display: block;
    border: 1px solid black;
    word-wrap: break-word;
}

Answer 2

实际上很简单：

span
{
    height:20px;
    width:100px;
    border: 1px solid black;
    display:block;
    overflow:hidden;
}

使用span模拟文本框行为

2 个答案: