0

我有一个包含多行文本的文本区域：

<textarea>this will not clipped
the bottom of this line will be clipped</textarea>

我有 CSS 将文本的行高设置为字体大小的一半：

textarea {
    color: #000000;
    font-size: 50px;
    line-height: 25px;
    text-align: center;
    height: 150px;
    width: 450px;
    overflow: hidden;
}

但是在 IE7/IE8/IE9 中显示时，textarea 的最后一行被剪掉了。我尝试了以下方法：

  1. 在之后添加一个额外的换行符将导致该行渲染良好。这会导致我的应用程序中不允许出现溢出。
  2. 在底部使用负边距和正填充。或者使用像 10px 这样的小高度值和像 140px 这样的大填充底部值。这渲染得很好，但会影响我对容器滚动高度和高度的测量。要继续使用此选项，我必须复制我的控件并将它们浮动在顶部并将实际用户输入复制到备用控件。
  3. 切换textarea到 adiv和 setting contentEditable="true"，通过 HTML 管理用户内容（意味着没有 \n 换行符<br/>）。
  4. 使用 JS 将 textarea 的高度切换为“auto”并添加一个属性，row="5"但文本仍然被裁剪并将其删除/添加到页面以允许它重新渲染不起作用。

jsFiddle 中的演示

4

1 回答 1

0

textarea 的高度最好由元素的 rows 属性控制，即：

<textarea rows="4"></textarea>

还要从你的风格中删除高度。

于 2013-01-22T21:53:39.120 回答