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.

Baca Juga:

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.

Artikel ini didedikasikan kepada: 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 -
- Big things start from small things -