CODEWITHSUNDEEP
htmlcss
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42464

text-overflow: ellipsis not work on TextArea

I am using <textarea> to show multiple lines. And I want to use "white-space:nowrap" and "text-overflow: ellipsis" to constrain each line to be shown in one line with "..." at the end. Below is the css styles I set but the "ellipsis" is not working.

    display: block;
    width:400px;
    height:20px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

Is there a way to do that for tag?

Upvotes: 8

Views: 13168

Answers (3)

Raghav
Raghav

Reputation: 11

This is not working for textarea in the table cell.I am using oj-textarea in the table cell which can have multiple lines. Tried below code, it shows ellipsis for that cells in the column irrespective of number of lines.

        [![<colgroup>
            <col width="100%" />
            <col width="0%" />
        </colgroup>
        <tr>
        <td  class="module overflow"><textarea>hjkkh jam</textarea></td> <td style="width":100px;" class="module overflow">jamunao kjjhj jk \n     hj jh kjhjhj kj kkjhh jhjhjh hjj hkjh jhjh jhkj jh hhjhjhjhjhjhjhjhjkhjk hjhjkhkhkjhkhkhjhjh</td>
        </tr>
    </table>
.module{
margin: 0 0 1em 0;
overflow: hidden;
}
.overflow {
  --max-lines: 2;
  width:100px;
  position: relative;
  max-height: 2.4rem;
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
  white-space: nowrap;
}
.overflow::before {
  position: absolute;
  content: "...";
/*   inset-block-end: 0;
  inset-inline-end: 0; */
  bottom: 0;
  right: 0;
}
.overflow::after {
  content: "";
  position: absolute;
/*   inset-inline-end: 0; */

  width: 1rem;
  height: 1rem;
  background: white;
}

In the image attached, even the cell has no String ellipsis is displayed

Upvotes: 0

nanobar
nanobar

Reputation: 66355

The only way I found which works is to have a div showing for the ellipses, then on focus switch to a textarea (they are overlaying each other). You can do something with pure CSS:

<TEXTAREA>
<DIV>

DIV should sit on top (absolute) with pointer-events: none.

TEXTAREA has opacity: 0.

When you have :focus hide the DIV (~ sibling) and change the TEXTAREA opacity to 1. You might find :focus-within pseudo selector to be handy too depending on your use case.

Upvotes: 3

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Use white-space:pre (but it will only work with FF, as no other browser allows ellipsis on the textarea)

.no-wrap {
  display: block;
  width: 400px;
  height: 80px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
<textarea class="no-wrap">
Nulla aliquet gravida nunc sit amet ultrices. Vestibulum ultricies mi eget feugiat aliquet
Curabitur placerat tellus vel pulvinar fringilla. Integer dignissim ut sem eget mollis.
Aliquam ac tortor in nunc dapibus blandit. Aliquam vehicula diam quis sem consequat
</textarea>

If you see the table at https://developer.mozilla.org/en/docs/Web/CSS/white-space#Values the only option that preserves new lines but does not wrap is the pre

Upvotes: -1

Related Questions