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: Restricted input type for number only by using HTML5

<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: Restricted input type for number only by using HTML5

.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