How To Truncate Text In CSS

Let’s say you have a tiny section on your website with a list of bullet points, but the text is too long. You would like to be able to truncate or cut off the extra characters to prevent the text from wrapping around to the next line. You can apply CSS to prevent your bullet points from wrapping around to the next line. Here’s what you will need to do. Assuming your div is a class called “bullets.”

.bullets {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

The ellipsis will add three little dots at the end telling your readers the text has been truncated. Simple enough.

JQuery Random Lists

I was looking for a JQuery code that would display a random order of unordered list. The HTML markup is displayed below. Each time the page is loaded, a different order of list is displayed.


Here’s the piece of JQuery code that you’ll need add to your webpage to sort and randomize your unordered list.

// get current ul
var $ul = $(this);
// get array of list items in current ul
var $liArr = $ul.children(‘li’);
// sort array of list items in current ul randomly
// Get a random number between 0 and 10
var temp = parseInt( Math.random()*10 );
// Get 1 or 0, whether temp is odd or even
var isOddOrEven = temp%2;
// Get +1 or -1, whether temp greater or smaller than 5
var isPosOrNeg = temp>5 ? 1 : -1;
// Return -1, 0, or +1
return( isOddOrEven*isPosOrNeg );
// append list items to ul

In addition, you can add a class to your unordered list like the example below:

<div class=”sample”>

You will need to change this line to include the class.

$(‘.sample ul’).each(function(){