CSS Trunk Text

css trunk text - web design - tutorial css

tutorial css untuk membuat css trunk text di dalam web design



CSS Trunk Text

Dalam pengembangan web design, kita seringkali menampilkan artikel terbaru atau berita terbaru di halaman situs kita atau pelanggan kita.
Dengan adanya penggunaan CSS Bootstrap, hal tersebut tidaklah sulit, karena kita bisa membuat kolom-kolom berita dengan mudah.

Contoh HTML yang digunakan dengan Bootstrap adalah:

Baca Juga: Simak Keunggulan Penggunaan MySQL yang Banyak Digunakan Web Developer in Indonesia Berikut
<div class="container">
	<div class="row">
		<div class="col-md-4 col-sm-6 ">
			<div class="border border-primary rounded-lg">
				<h2><a href="#">Neque porro quisquam est qui dolorem ipsum</a></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus ipsum justo, sed varius arcu bibendum sit amet. Nunc tempus eu ex placerat pellentesque. Integer id felis in eros tristique scelerisque vitae nec neque. Fusce at lacinia felis, ut cursus lorem. Aliquam ac nunc laoreet, efficitur enim eget,</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6">
			<div class="border border-primary rounded-lg">
				<h2><a href="#">Neque porro</a></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus ipsum justo, sed varius arcu bibendum sit amet. Nunc tempus eu ex placerat pellentesque. Integer id felis in eros tristique scelerisque vitae nec neque. Fusce at lacinia felis, ut cursus lorem. Aliquam ac nunc laoreet, efficitur enim eget,</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6">
			<div class="border border-primary rounded-lg">
				<h2><a href="#">Neque porro quisquam est qui dolorem ipsum Neque porro quisquam est qui dolorem ipsum</a></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus ipsum justo, sed varius arcu bibendum sit amet. Nunc tempus eu ex placerat pellentesque. Integer id felis in eros tristique scelerisque vitae nec neque. Fusce at lacinia felis, ut cursus lorem. Aliquam ac nunc laoreet, efficitur enim eget,</p>
			</div>
		</div>
	</div>
</div>

Dengan contoh di atas, akan muncul tiga kolom berita.

Tetapi masalah yang timbul adalah tinggi kotak menjadi tidak sama, sehingga tidak rapi. hal ini disebabkan karena panjang huruf pada tag h2 memiliki panjang berbeda-beda.
Jika kita menggunakan fungsi PHP: substr untuk memotong text, memang bisa, tetapi akan jadi masalah karena kita tidak tahu harus dipotong berapa huruf. Hal ini disebabkan web responsive memilki lebar berbeda-beda antara satu monitor dengan monitor lain bahkan dengan smartphone.

Nah, di sinilah fungsi CSS Trunk Text bisa digunakan.
Kode singkatnya adalah:

Baca Juga: Simak Keunggulan Penggunaan MySQL yang Banyak Digunakan Web Developer in Indonesia Berikut
.judul
	{
		white-space: nowrap;
		overflow: hidden;
		 text-overflow: ellipsis;
		 max-width: 75ch;
	}

Nilai dari max-width bisa diatur tetapi jangan terlalu kecil.
75ch artinya 75 character.

Dengan cara di atas, maka bagian title akan otomatis terpotong dengan panjang karakter berbeda-beda mengikuti lebar monitor.

Anda dapat melihat live demo untuk melihat perbedaan penggunaan Trunk Text di bawah ini

DEMO



Artikel Lainnya

Web Design Surabaya - Web Design Murah - Jasa SEO terbaik

Ketahui Cara Kerja Javascript Dalam Membangun Sebuah Website

Bahasa pemrograman yang digunakan untuk membuat situs website memang beragam. Kini, para developer pemula tidak hanya menggunakan bahasa pemrograman web dengan PHP saja, yang tak kalah populernya juga menggunakan Javascript. Javascript sendiri cukup ...


Beginilah Cara Kerja MySQL, Perbedaan MySQL Dan PHP, Serta Tips Belajar MySQL

Dalam pengelolaan database suatu website, terutama website-website besar MySQL sering menjadi andalannya. Ketika mulai belajar tentang web programming, Anda bisa mengetahui lebih dalam mengenai MySQL ini.MySQL memiliki cara kerjanya tersendiri, dan b ...


Mencari data ulang tahun dengan PHP dan MySQL

Terkadang kita mengalami kesulitan untuk mencari siapa saja yang berulang tahun mulai dari tanggal X sampai tanggal Y jika data tersimpan di dalam database MySQL. Hal ini disebabkan karena saat disimpan di dalam database, format tanggal lahir adalah ...


Kami membuat RESPONSIVE WEB

Responsive web adalah kode program web sehingga website tetap terbaca dengan mudah di semua perangkat baik komputer, smartphone, maupun tablet, dan sangat cocok dengan syarat dari mesin pencari google

web design di bali

Foto Buat Nikah

Desain Grafis

Kontak

08113638531 / 08113865464

info@tatamedia.com

Desainer Website di Surabaya

Web Design di Bali

Kantor

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Video Prewedding

Web Design

Support

Kirim permintaan anda ke

info@tatamedia.com