Truncate String using CSS (ellipsis)

February 23, 2015 superadmin 0

We can limit a text length using css properties. All the following css properties are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .div-truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Email this page

Custom select box with simple css

October 29, 2014 superadmin 0

I have given the simple example below for write custom css for select box HTML <div class=”select-style”> <select> <option value=”CakePHP”>CakePHP</option> <option value=”Symfony”>Symfony</option> <option value=”Yii”>Yii</option> <option value=”Zend”>Zend</option> </select> </div> CSS .select-style { border: 1px solid #ddd; width: 240px; border-radius: 3px; overflow: hidden; background: #fafafa url(“img/dropdown-btn-arrow.png”) no-repeat 90% 50%; } .select-style select { padding: 5px 8px; width: 268px; border: none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; } Email this page

How we use IE related css without affecting other browsers?

September 12, 2014 superadmin 1

There are three ways to use IE related css without affecting other browsers. Below are the example for browser specific Style Sheet, which targets defined browser. 1) ALL VERSIONS of IE <!–[if IE]> <link rel=”stylesheet” type=”text/css” href=”all-ie-css.css” /> <![endif]–> 2) Everything EXCEPT IE <!–[if !IE]><!–> <link rel=”stylesheet” type=”text/css” href=”not-ie-css.css” /> <!–<![endif]–> 3) IE 6 ONLY <!–[if IE 6]> <link rel=”stylesheet” type=”text/css” href=”only-ie6-css.css” /> <![endif]–> Email this page