Ziggler Ziggler - 5 months ago 11
HTML Question

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

I am working on MVC application on IE 11 and I have a requirement to show only 3 lines even though the string can be very long. I tried different ways and started looking into textarea. In that also I tried various ways and I read blogs and posts and they al say use rows attribute. I gave rows=3 but I can see more than 3 lines. In one of the posts at SO they say try like below. I tried it but still if you see you can add some more text and you can see more lines.

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

How to really show only 3 lines. I donot mind textarea or other controls. I tried with span, p, and textarea.

In below image I need to show only 3 lines..

enter image description here

.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>


After using disabled.

enter image description here

UPDATE - Solution
I accepted Paul's answer below since that helped me to understand textarea and dig in more into it. I solved my issue like below using span eventhough textarea also worked perfectly fine.

<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>


enter image description here

Answer

If you don't want any scrolling whatsoever, set it to 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>

Comments