Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Efek Teks Overflow HTML Menggunakan textOverflow Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style textOverflow DOM pada HTML merupakan properti yang digunakan untuk menentukan behavior dari teks ketika teks tersebut overflow terhadap elemen yang mengandung elemen box.


Sebelum memahami lebih dalam materi tentang Efek Teks Overflow HTML Menggunakan textOverflow Style DOM, terlebih dahulu pelajari materi tentang: Melakukan Indentasi Baris HTML Menggunakan textIndent Style DOM, Mengatur Dekorasi Teks HTML Menggunakan textDecorationStyle DOM, dan Mengatur Baris Dekorasi Teks HTML textDecorationLine Style DOM.

Sintak:
  • Digunakan untuk mengembalikan nilai properti textOverflow: object.style.textOverflow
  • Digunakan untuk mengatur nilai properti: object.style.textOverflow = "clip|ellipsis|initial|inherit"

Return Values: Berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti text-overflow dari suatu elemen.

Property Values:
  • clip: Digunakan untuk clip konten jika konten tersebut overflow. Value ini merupakan nilai default dari properti textOverflow.
  • ellipsis: Digunakan untuk memperlihatkan ellipsis ketika teks overflow.
  • initial: Digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: Digunakan untuk menerima nilai turunan properti dari elemen parent.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style textOverflow 

DOM

</title>

 

<style>

.content 

{

background-color: lightgreen;

height: 100px;

width: 300px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style textOverflow 

DOM

</b>

 

<p>

Properti textOverflow 

merupakan properti yang 

digunakan untuk menentukan 

bagaimana sebuah teks 

seharusnya ditampilkan ketika 

teks tersebut overflow 

terhadap elemen container.

</p>

 

<div class="content">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</div>

 

<button 

onclick="setOverflow()">

Change textOverflow

</button>

 

<!-- Script untuk mengatur 

textOverflow menjadi clip -->

<script>

function setOverflow() 

{

elem = document.querySelector('.content');

elem.style.textOverflow = 'clip';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style textOverflow DOM

Properti textOverflow merupakan properti yang digunakan untuk menentukan bagaimana sebuah teks seharusnya ditampilkan ketika teks tersebut overflow terhadap elemen container.

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style textOverflow 

DOM

</title>

 

<style>

.content 

{

background-color: lightgreen;

height: 100px;

width: 300px;

white-space: nowrap;

overflow: hidden;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style textOverflow 

DOM

</b>

 

<p>

Properti textOverflow 

merupakan properti yang

digunakan untuk menentukan 

bagaimana sebuah teks 

seharusnya ditampilkan ketika 

teks tersebut mengalami 

overflow terhadap elemen 

container.

</p>

 

<div class="content">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</div>

 

<button 

onclick="setOverflow()">

Change textOverflow

</button>

 

<!-- Script untuk mengatur 

textOverflow menjadi clip -->

<script>

function setOverflow() 

{

elem = document.querySelector('.content');

elem.style.textOverflow = 'ellipsis';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style textOverflow DOM

Properti textOverflow merupakan properti yang digunakan untuk menentukan bagaimana sebuah teks seharusnya ditampilkan ketika teks tersebut mengalami overflow terhadap elemen container.

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style textOverflow 

DOM

</title>

 

<style>

.content 

{

background-color: lightgreen;

height: 100px;

width: 300px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style textOverflow 

DOM

</b>

 

<p>

Properti textOverflow 

merupakan properti yang 

digunakan untuk menentukan 

bagaimana sebuah teks 

seharusnya ditampilkan ketika 

teks tersebut overflow 

terhadap elemen container.

</p>

 

<div class="content">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</div>

 

<button 

onclick="setOverflow()">

Change textOverflow

</button>

 

<!-- Script untuk mengatur 

textOverflow menjadi clip -->

<script>

function setOverflow() 

{

elem = document.querySelector('.content');

elem.style.textOverflow = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style textOverflow DOM

Properti textOverflow merupakan properti yang digunakan untuk menentukan bagaimana sebuah teks seharusnya ditampilkan ketika teks tersebut overflow terhadap elemen container.

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style textOverflow 

DOM

</title>

 

<style>

#parent 

{

text-overflow: ellipsis;

}

 

.content 

{

background-color: lightgreen;

height: 100px;

width: 300px;

white-space: nowrap;

overflow: hidden;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style textOverflow 

DOM

</b>

 

<p>

Properti textOverflow 

merupakan properti yang 

digunakan untuk menentukan 

bagaimana sebuah teks 

seharusnya ditampilkan ketika 

teks tersebut overflow 

terhadap elemen container.

</p>

 

<div id="parent">

<div class="content">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</div>

</div>

 

<button 

onclick="setOverflow()">

Change textOverflow

</button>

 

<!-- Script untuk mengatur 

textOverflow menjadi inherit 

-->

<script>

function setOverflow() 

{

elem = document.querySelector('.content');

elem.style.textOverflow = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style textOverflow DOM

Properti textOverflow merupakan properti yang digunakan untuk menentukan bagaimana sebuah teks seharusnya ditampilkan ketika teks tersebut overflow terhadap elemen container.

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.


Efek teks overflow dalam pengembangan situs web menjadi salah satu fitur penting untuk menangani tampilan teks yang melebihi batas ruang yang telah ditentukan. Dalam konteks ini, gaya teks overflow menggunakan properti pengaturan teks overflow yang terdapat dalam objek gaya model objek dokumen (DOM) memberikan kontrol atas bagaimana teks yang lebih panjang dari area yang disediakan dapat ditampilkan. Ketika teks terlalu panjang untuk sebuah elemen kontainer, penting untuk menentukan bagaimana teks tersebut akan ditangani agar tampilan halaman tetap terjaga rapi dan tidak mengganggu tata letak. Properti ini sangat relevan ketika desain responsif atau tata letak grid digunakan, karena sering kali kontainer yang digunakan memiliki ukuran tetap atau dapat berubah tergantung pada ukuran layar.

Teks overflow terjadi saat panjang teks yang dimasukkan melebihi ruang yang tersedia dalam sebuah elemen. Sebagai contoh, dalam sebuah kotak atau kolom teks, jika panjang teks lebih besar daripada lebar kolom tersebut, maka teks tersebut harus dipotong atau dilipat sesuai pengaturan yang ada agar tidak melanggar batas dan mengacaukan desain halaman. Dalam hal ini, properti overflow menjadi solusi efektif yang dapat digunakan untuk memastikan bahwa teks tidak merusak tampilan halaman web.

Pengaturan teks overflow tidak hanya menentukan apakah teks yang meluap akan disembunyikan, tetapi juga memberikan cara untuk menambahkan indikator agar pengguna tahu bahwa ada lebih banyak teks yang tersembunyi. Dalam beberapa situasi, hal ini memungkinkan pengembang untuk memberikan petunjuk visual yang lebih jelas bagi pengguna mengenai adanya lebih banyak informasi yang dapat diakses meskipun tidak terlihat sepenuhnya. Properti teks overflow ini sangat berguna dalam banyak kasus, terutama pada desain antarmuka pengguna, seperti tombol, kolom tabel, dan area yang memiliki ruang terbatas.

Fitur ini bekerja sangat baik bila digunakan dalam kombinasi dengan pengaturan lain yang relevan, seperti pengaturan lebar elemen dan pengaturan tampilan yang memadai. Dalam banyak desain situs web modern, penggunaan properti ini memungkinkan pengembang untuk mengatur elemen halaman agar tetap responsif dan dinamis, bahkan ketika ruang yang ada terbatas. Efek teks overflow menjadi semakin penting dengan berkembangnya perangkat seluler dan ukuran layar yang semakin bervariasi. Hal ini memungkinkan desain untuk beradaptasi dengan berbagai ukuran layar dengan tetap menjaga keterbacaan dan kenyamanan visual bagi pengguna.

Pengaturan teks overflow dapat mengatasi masalah tersebut dengan dua cara utama, yaitu dengan menyembunyikan teks yang meluap atau menambahkan efek khusus, seperti menggunakan tanda titik-titik untuk menunjukkan adanya lebih banyak teks. Dengan pengaturan ini, teks yang meluap dapat disembunyikan secara rapi tanpa mengganggu keseluruhan desain halaman. Biasanya, properti ini digunakan dengan pengaturan lain yang membantu menyesuaikan tata letak halaman agar teks yang tersembunyi tidak terlihat mencolok atau mengganggu.

Terkadang, teks overflow juga berfungsi dengan menambahkan simbol yang menunjukkan bahwa masih ada teks yang belum sepenuhnya ditampilkan. Efek titik-titik ini sangat sering terlihat pada tombol atau kolom yang memiliki ruang terbatas untuk menampilkan teks. Penambahan simbol titik-titik tidak hanya memberikan petunjuk visual yang jelas kepada pengguna, tetapi juga menghindari pemotongan teks yang dapat membingungkan atau merusak makna dari teks tersebut. Hal ini memungkinkan pengguna untuk memahami bahwa teks yang lebih panjang masih ada, namun tidak dapat ditampilkan sepenuhnya dalam ruang yang ada.

Keunggulan lain dari properti teks overflow adalah kemampuannya untuk bekerja dengan pengaturan lain yang digunakan dalam halaman, seperti pengaturan lebar elemen dan ukuran font. Dengan mengatur lebar elemen secara proporsional dengan ruang yang tersedia, pengembang dapat memastikan bahwa teks yang ditampilkan tidak meluap dari batas yang telah ditentukan. Hal ini memungkinkan halaman tetap terorganisir dan rapi tanpa mengorbankan kualitas tampilan atau keterbacaan teks. Penggunaan teks overflow yang tepat dapat sangat meningkatkan pengalaman pengguna, memberikan tampilan yang bersih, dan mengurangi gangguan pada tata letak halaman.

Properti ini juga sangat berguna ketika halaman web harus berfungsi dengan berbagai perangkat dan ukuran layar. Mengingat penggunaan perangkat seluler yang semakin luas, dimana layar yang lebih kecil sering kali menjadi tantangan bagi pengembang dalam memastikan desain tetap optimal, teks overflow menyediakan solusi yang efektif. Hal ini memastikan bahwa teks tetap terpotong dengan rapi atau diberi tanda tertentu pada perangkat dengan ukuran layar kecil, tanpa mengganggu elemen lain pada halaman. Desain yang responsif dapat dihasilkan dengan lebih baik, tanpa khawatir teks akan meluap dan merusak pengalaman pengguna.

Namun, dalam penerapannya, pengaturan teks overflow perlu diperhatikan dengan hati-hati. Jika terlalu sering digunakan tanpa pengaturan yang bijaksana, efek teks overflow bisa membuat pengguna merasa kebingungan atau kehilangan informasi penting. Teks yang tersembunyi atau terpotong mungkin menyebabkan pengguna merasa tidak nyaman atau kesulitan dalam memahami pesan yang disampaikan. Oleh karena itu, perlu dipertimbangkan dengan seksama kapan dan bagaimana teks overflow diterapkan agar tidak mengurangi kegunaan atau aksesibilitas situs web.

Meskipun demikian, ketika digunakan dengan benar, efek teks overflow dapat memberikan tampilan halaman yang lebih rapi dan teratur. Fitur ini memberi pengembang kontrol yang lebih besar dalam menyesuaikan teks sesuai dengan ruang yang ada, yang sangat penting dalam desain antarmuka pengguna yang baik. Efek ini juga memungkinkan elemen untuk tetap terlihat terorganisir, meskipun teks yang dimasukkan lebih panjang dari yang diinginkan. Dengan pengaturan yang tepat, teks overflow dapat memperkaya pengalaman pengguna, memberikan tampilan halaman yang bersih, dan memastikan bahwa desain situs web tetap berfungsi dengan baik di berbagai perangkat.

Seiring perkembangan dunia desain web, fitur teks overflow terus berkembang. Pengembang dapat menyesuaikan dan menggabungkannya dengan fitur lain untuk menciptakan antarmuka pengguna yang lebih dinamis dan responsif. Penerapan yang bijaksana dari efek ini akan membuat situs web lebih profesional dan nyaman bagi pengguna, tanpa mengorbankan estetika atau keterbacaan. Sehingga, teks overflow tidak hanya berfungsi sebagai solusi teknis untuk masalah tampilan, tetapi juga sebagai alat yang memperkaya pengalaman visual bagi pengunjung situs.

Artikel ini akan dibaca oleh: Firdaus Fajar Utsmani, Fitran Dwi Saputra, Fitri Setyandari, Geli Ambarwati, dan Gilang Fajar Prasetyo.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Efek Teks Overflow HTML Menggunakan textOverflow Style DOM"

  1. AnonimKamis, 18 Agustus 2022 pukul 22.01.00 WIB

    Sebutkan ada berapa jenis browser yang dapat digunakan oleh seorang programmer ketika ingin mengaktifkan properti textOverflow Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimKamis, 18 Agustus 2022 pukul 22.02.00 WIB

      Berikut ini ditampilkan beberapa contoh browser populer yang biasa digunakan oleh seorang programmer ketika ingin mengaktifkan properti textOverflow Style DOM pada HTML:
      - Google Chrome
      - Internet Explorer
      - Firefox
      - Apple Safari
      - Opera

      Hapus
  2. AnonimSelasa, 13 September 2022 pukul 23.13.00 WIB

    Apa yang dimaksud dengan properti textOverflow Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 13 September 2022 pukul 23.13.00 WIB

      Properti textOverflow style dom pada html merupakan properti yang digunakan untuk menentukan apa yang akan terjadi teks, jika teks tersebut mengalami overflow pada dokumen html.

      Hapus
    2. AnonimSelasa, 13 September 2022 pukul 23.14.00 WIB

      Properti textOverlow Style DOM pada HTML adalah properti yang digunakan untuk mengembalikan dan menerapkan apa yang seharusnya terjadi ketika teks sedang flow di luar dari container elemen dalam file HTML.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -