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: Making an input type for checking valid email address in HTML
<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: Making an input type for checking valid email address in HTML
.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

Checking Password Strength with pStrength jQuery Plugin

When we make a web design, we often make registration form for the visitor. One of the field is password. One thing we need is password strength to ensure the better security for login access.. To fulfill that we can use pStrength jQuery Plugin.We j ...


6 Reasons Why Web Developers in Indonesia Love To Use Javascript

There are some popular programming languages most developers use to develop a website. Javascript is one of the most famous programming languages used by web developers in the world, including Indonesia. When you ask a web developer in Indonesia, the ...


10 Tips to Learn JavaScript Easily

Basically, JavaScript is one of the best programming languages for web developers. You can develop a web and open the door for many employment opportunities with JavaScript. However, learning it can be a difficult task for beginners. Ultimate Tips t ...


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