Truncate text

Putulin ang isang line ng text kapag nag-overflow na ito at lagyan ng ellipsis sa dulo.

Francis Rubio

by Francis Rubio

Gamit ang ilang lines of code sa CSS, puwedeng putulin ang isang paragraph para maging isang line lang at lagyan ng ellipsis sa dulo nito.

Halimbawa, sa code samples na ito:

<p class="one-line">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius qui vero assumenda facilis maiores laudantium, quis dolor quia mollitia itaque? Error totam hic repudiandae ratione, adipisci quam dolore accusantium architecto?</p>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius qui vero assumenda facilis maiores laudantium, quis dolor quia mollitia itaque? Error totam hic repudiandae ratione, adipisci quam dolore accusantium architecto?

white-space: nowrap

Google Chrome: Supported

Microsoft Edge: Supported

Firefox: Supported

Safari: Supported

Ini-indicate ng white-space property kung paano dapat i-handle ng browser ang white spaces (e.g. space, tab, <br>, new line) sa isang element.

Kapag naka-set ito to nowrap, hindi nito hahayaang mag-wrap ang text papunta sa new line kapag wala nang available space. 

.one-line {
  white-space: nowrap;
}

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius qui vero assumenda facilis maiores laudantium, quis dolor quia mollitia itaque? Error totam hic repudiandae ratione, adipisci quam dolore accusantium architecto?

overflow: hidden

Google Chrome: Supported

Microsoft Edge: Supported

Firefox: Supported

Safari: Supported

Ini-indicate ng overflow kung ano ang mangyayari kapag lumampas ang content sa container nito. Kapag hidden ang value, itatago ng browser ang lahat ng content na nag-overflow sa element. 

.one-line {
  white-space: nowrap;
  overflow: hidden
}

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius qui vero assumenda facilis maiores laudantium, quis dolor quia mollitia itaque? Error totam hic repudiandae ratione, adipisci quam dolore accusantium architecto?

text-overflow: ellipsis

Google Chrome: Supported

Microsoft Edge: Supported

Firefox: Supported

Safari: Supported

Ini-indicate ng text-overflow property kung paano ipapakita na may nag-overflow na content. Kapag ellipsis ang value nito, maglalagay ang browser ng ellipsis (“…”). 

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius qui vero assumenda facilis maiores laudantium, quis dolor quia mollitia itaque? Error totam hic repudiandae ratione, adipisci quam dolore accusantium architecto?

Resources