desainer website di surabaya

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:

<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:

.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

Making an input type for checking valid email address in HTML

As a web design services, we often use input type="text" and input type="password" like below: For text: <input type="text" name="username" size="25" maxsize="15"> For password: <input type="password" name="password"> The syntax above ...


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 ...


Getting current total and previous one from MySQL

As the part of the Best Webdesign, we ever get the request from our customer to show the total selling in a month including previous selling to count the percentage of profit.. To do that, we often use a very simple way, namely using two queris of M ...


Working Process

Web Design - Wedding Photography - Wedding Videography

Our Location at Surabaya and Bali

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