CSS Trunk Text

css trunk text - web design - tutorial css

tutorial css for using css trunk text when creating good web design



CSS Trunk Text

In the web design development, we often show the last article in our site or our customer's site.
By using CSS Bootstrap, it is easy because we can make the column easily.

The HTML sample that we often use is like below:

Read: Looking for birthday with PHP and MySQL
<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>

With above example, we will show three column of news.

But, the problem is that the column height has different size, so it is not good. It is caused by  h2 tag which has difference length.
If we use PHP function: substr to cut the text, it will make another problem, because we do not know how many characters need to be cut. It is caused by CSS Bootstrap that makes different width based on monitor resolution including smartphone.

So, the better way is using CSS Trunk Text.
The simple code is as follows:

Read: Looking for birthday with PHP and MySQL
.judul
	{
		white-space: nowrap;
		overflow: hidden;
		 text-overflow: ellipsis;
		 max-width: 75ch;
	}

The vaue of max-width can be changed as your need but not too small.
75ch means 75 characters.

By implementing the code above the title will be cut automatically with different length of characters based on monitor resolution.

You can see the live demo to see the difference of using CSS Trunk Text.

DEMO



Related Article

Web Design Services - Best Webdesign - Best SEO Services

The usage of if and else in MYSQL and PHP

Hallo friends of Tatamedia, web developer in Surabaya and Bali.Now we will learn about the usage of if in mysql, so the query can be shortened. Generally, if in mysql has a form as follows: IF(condition, value_if_true, value_if_false) where:condit ...


Looking for birthday with PHP and MySQL

We often experience difficulty to find the birthday between two dates inside MySQL database. It is caused by the storage we use in MySQL, namely brith date format like Y-m-d, for example 2000-12-21. The problem occurs when we try to find the birthda ...


How to make website loads faster

As the Best Webdesign, we often face website loads slowly, because it has to wait for long time to download whole contents such as CSS, Javascript, and images. This content must be downloaded first before the browser shows the content. Now, we will ...


We create RESPONSIVE WEBSITE

Responsive web is special program code, so the website can be read in all devices. It is very suitable for better page rank in search engine like google

graphic design in indonesia

Website Design in Indonesia

Graphic Design in Indonesia

Contact

+628113638531 / +628113865464

info@tatamedia.com

Webdesigner in Indonesia

Videographer in Bali

Office

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Fine Art Photography in Bali

Web Design

Support

Send your request to

info@tatamedia.com