滚动文本区域时防止“半切”行答案

【问题标题】：Prevent "half cut" lines when scrolling a textarea滚动文本区域时防止“半切”行
【发布时间】：2014-07-27 01:09:40
【问题描述】：

我有一些文本区域，其中包含一堆文本。但是，我在滚动之前将文本的底部截断了。我尝试使用padding，但它只会弄乱文本区域的大小并且不适用于内容。

我不擅长解释，所以这是一张图片

Here 也是个小提琴

【问题讨论】：

事实上，你左边的例子对我来说看起来更好，因为它提供了一个更好的视觉线索，表明里面有更多的文字。
卷轴也表示这一点。
我不认为CSS有这样的概念..里面的文字不是元素。
我前段时间使用纯 CSS 实现了它，但找不到源，所以我知道这是可能的。感谢您的编辑 - 让它更清晰:)
@JessieStalk 是的，但是（1）这对于人眼来说不太自然，并且对于推理卷轴并将它们与文本区域相关联的认知负荷更大，与自然看到还有更多的东西；（2）平板电脑甚至Office 2013等新界面都非常愚蠢地隐藏了滚动条，所以直到您尝试移动它时您甚至都不知道那里有滚动条。在这种情况下，半切线是唯一的视觉线索。

【解决方案1】：

<textarea rows="10">Lorem ipsum</textarea>

您可以使用除height 以外的任何样式（从您的小提琴中复制）：

textarea {
    background-color: rgb(235, 235, 235);
    border-radius: 10px;
    width: 30%;
    /* height: 150px; REMOVED */
    border: 1px solid rgb(201, 201, 201);
    color: gray;
    padding: 20px;
    font-family: 'Lora' !important;
    font-style: italic;
    font-size: 17px;
    resize: none;
}

【讨论】：