Question

我创建了一个简单的输入效果，如图所示：http://jsfiddle.net/kitsonbroadhurst/fzf70ttg/9/

我的问题是，当输入大文本时，它会上下移动整行。

是否可以将文本保持在与添加多种字体样式和大小相同的级别？（即添加大字体时，较小的文本不会垂直移动）

我尝试使用position: relative包装div然后position: absolute将所有内容保存在同一行，但这不起作用。

.wrapper {
    position: relative;
}

.text-box {
    position: absolute; 
    bottom: 0;
}

我宁愿不使用任何类型的插件，也不愿意使用编码解决方案。

Answer 1

设置行高，使其不会跳转：

p { line-height: 75px; }

使用盒子模型，浏览器将根据文本大小动态计算高度。在元素上放置一个硬尺寸会阻止这种情况。