HTML/MVC 只显示 3 行...高度必须是自动的

Question

我正在 IE 11 上开发 MVC 应用程序，我需要只显示 3 行，即使字符串可能很长。我尝试了不同的方法并开始研究 textarea。在那方面，我也尝试了各种方法，我阅读了博客和帖子，他们都说使用行属性。我给了 rows=3 但我可以看到超过 3 行。在 SO 的一篇帖子中，他们说像下面这样尝试。我试过了，但如果你看到了，你仍然可以添加更多文本，你可以看到更多行。

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea

如何真正只显示3行。 我不介意文本区域或其他控件。我尝试使用 span、p 和 textarea。

在下图中我只需要显示 3 行..

.threelinesTextArea
     {
        overflow:hidden; 
        resize:none; 
        border: none; 
        word-wrap:break-word; 
        white-space:normal;
     }

<textarea name="lblSellerNameValue" class="threelinesTextArea" rows="3" cols="40" maxlength="140">SellerName0 SellerLastName0, SellerName1 SellerLastName1, SellerName2 SellerLastName2, SellerName3 SellerLastName3, SellerName4 SellerLastName4 , SellerName0 SellerLastName0, SellerName1 SellerLastName1, SellerName2 SellerLastName2, SellerName3 SellerLastName3, SellerName4 SellerLastName4
 </textarea>

使用后禁用

更新 - 解决方案 我在下面接受了 Paul 的回答，因为这有助于我理解 textarea 并深入研究它。我使用 span 解决了我的问题，尽管 textarea 也工作得很好。

<span style="display:inline-block; overflow:hidden; word-wrap:break-word; white-space:normal; height:40px">
SellerLastName1, SellerName2 SellerLastName2, SellerName3 SellerLastName3, SellerName4 SellerLastName4 , SellerName0 SellerLastName0, SellerName1 SellerLastName1, SellerName2 SellerLastName2, SellerName3 SellerLastName3, SellerName4 SellerLastName4
</span>

Answer 1

如果您不需要任何滚动，请将其设置为 disabled。

textarea:disabled {
  background-color: white;
}

<textarea rows="3" cols="50" style="resize: none; overflow: hidden" disabled>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam luctus justo vitae elementum bibendum. Quisque tortor felis, laoreet id arcu quis, congue ultricies urna. Nulla efficitur, nulla vitae facilisis pulvinar, neque ante venenatis sem, in vehicula nisl mi sit amet metus. Sed sollicitudin felis nec pharetra eleifend. Proin eget dolor risus. Nam tempus diam maximus erat eleifend scelerisque. Ut ipsum massa, aliquet et erat eget, cursus imperdiet arcu. Donec feugiat eu magna sed imperdiet. Nunc congue pellentesque ipsum sit amet congue. Nunc mattis mauris odio. Cras consectetur est sagittis pretium luctus. Nullam at velit quis nibh vestibulum mattis. Donec aliquam ultricies gravida. Quisque dictum erat risus, eu tincidunt nulla bibendum quis. Donec viverra, eros vitae dignissim varius, mauris dolor sodales purus, tempor varius nisi enim vel risus.

Nam et tempor nisi. Suspendisse porta interdum elit non sagittis. In hac habitasse platea dictumst. Nunc ultrices leo nec neque blandit scelerisque. Fusce eget mauris vulputate ipsum pellentesque facilisis. Nam id augue ut purus convallis faucibus id sed risus. Aliquam odio nulla, maximus eget condimentum sit amet, dictum ut ante.

Curabitur porttitor consequat tellus in dictum. Nulla efficitur tellus at arcu dictum maximus. Quisque quis sodales mauris, nec aliquet risus. Suspendisse mollis maximus consequat. Maecenas dapibus vitae lacus sed sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ornare ex eget augue venenatis, quis congue est dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tortor, pellentesque non velit a, molestie condimentum tortor. Pellentesque quis nisi nisi. Aliquam erat volutpat. Pellentesque aliquet ante eget malesuada efficitur. Praesent id dolor id neque semper tincidunt. In non ligula id mi tincidunt vestibulum ut et orci.
</textarea>

HTML/MVC 只显示 3 行...高度必须是自动的

HTML/MVC show only 3 lines... height must be auto

html

textarea