Check out our Angular Book Series.

Use CSS To truncate a string with an ellipsis

My expertise in UI programming is creating reusable components, but less so on the design side of things. Every once in while I discover something interesting about CSS that I feel is worth sharing. Today I'll show you how to truncate a string with an ellipsis, magically.

First, let's create a few H1:

<h1>First Item</h1>
<h1>Second Item</h1>

The truncating will work on any HTML element, I just chose H1 for easy code. How add some CSS:

h1 {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

First add a specific width. Then hide the overflow with overflow and prevent word wraps with white-space. Finally, specify the text-overflow to value ellipsis. This will force the text to truncate if it gets too long:

Play with the code over here.

How do I uppercase the first letter of a word with CSS?

I was working on a project, and during a Pull Request review someone had written a TypeScript function to capitalize the first letter of each word. I said "It looks good to me" but one of my colleagues said "Hey, why don't we use CSS for this."

"CSS can do this?" Said Jeffry, blinking surprised.

It can, and it is super simple to do. CSS provides a text-transform property.

Try this text:

<div style="text-transform: capitalize;">the quick brown fox jumped over the lazy dogs</div>

Play with the Sample.

Sometimes I'm more surprised by the simple stuff I don't know than the complicated stuff.

How do I fix IE11 problems with CSS Calc and min-height?

I hate it when you have a problem that you cannot replicate in a simple example. That's exactly where I am. I'm working on an application built with HTML, CSS, and various JavaScript frameworks. The application requires a footer to be aligned at the bottom of the page. If the content is too large for the page, then the the footer should show up under the content. But, if the content is too small for the page, the footer should show up at the bottom of the window, or viewport.

This should be pretty simple to build using CSS and HTML:

<div class="wrapper">
Lots of Main Content and navigation and headers Here
Some Footer Information Here that should always be at the bottom of the page

The CSS would be something like this:

html, body {
height: 100vh;
margin : 0;

.wrapper {
min-height: calc(100% - 200px);

footer {
height : 200px;
background-color : blue;

The actual client project code is a lot more complex, but this gives you the gist. Play with the code here. Ignore my design skills.

The problem I was having was that IE11 seemed to have a problem with the min-height. When clicking in the page, or clicking a link to go to another page, it was as if the wrapper's min-height would shrink down on pages where the view height was greater than the actual content. This would cause the footer to jump to the middle of the page.

For the life of me, I haven't been able to create a simple sample to demonstrate this. Some part of the client's custom code seems to be causing this.

After some head banging and conferring with my team, I came up with this solution. It makes use of JavaScript and JQuery to 'hard code' the min-height on the wrapper. Instead of using the CSS Calc. this happens when the page loads and whenever the page is resized.

if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)){
function onResize(){
     /* The jquery calc code */
     $('.wrapper').css('min-height', '100%').css('min-height', '-=200px');

$(window).resize(function() {



I used a regex trick to only execute the code for IE browsers. And I used this answer as a base for my solution.

Part of our problem solving this was my inability to create a simple reproducible case, but pouring over thousands of line of code I could not find the magic style combination that caused the 'footer jump' problem.

Frustrating; but the JS code above seems to solve the issue admirably.

How do I Extend a Background Color the Full Height of a Div with CSS?

Last week I used CSS to tile a graphic across the whole width of a page. The purpose was to extend a header bar's color when the page scrolled right beyond the iniital viewport.

Now, with the same project I wanted to extend the left nav to the full height of the page. I couldn't use the same trick as you can't tile two separate background images.

This is still doable with some CSS. First, start the HTML Body:


We want the body to be the height of the view area:

body {
height : 100vh;

This sets the body to 100% height of the view area.

Now create our content wrapper div inside the body:

<div class="flex">

This code uses FlexBox for display:

.flex {
display : flex;
height : auto;
min-height : 100%;

It also contains a trick. The height is set to auto and the min-height is set to 100%. That, combined with the body's height of 100vh will extend this div through the full height of the page.

Finally, create our left nav bar inside our Flex div:

<div class="somebar">
Some Text and other things

This is styled with a specific width, but no specific height. I also specified the color

width : 150px;
color : white;

Check out the code here.

I've been doing a lot of HTML CSS work for a client, but I'm working on some longer programming based articles which will be coming out soon.

Can I create an HTML Background with an inline Image?

I'm working on a site for some clients, and one of their complaints was that the left nav bar was not extending the full height of the page. The nav div was set to expand to its content, which meant it stopped when it ran out of content. On some pages it looked fine, on others the nav bar ended too early. As a programmer, I don't often deal with design issues like this, so I pulled in the project's designer and we put our heads together to find a solution.

First, the problem was very generically like this:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
body {
margin : 0px;
background-color : #0000FF;
width : 200px;
height : 50%;
color : #ffffff;
.nav a {
color : #ffffff;
<div class="nav">
Some info in the nav bar<br/>
<A href="">Some Link</A>

Our code was much more complicated, using Flexbox for complicated layouts, but this is simple enough example to demonstrate the problem. We were not able to use a simple height:100% in CSS because some parent containers used Flexbox styling and did not stretch the full height of the page.

My designer friend recommended tiling a background image. We can change the CSS for the body tag to something like this:

body {
margin : 0px;
background: top left url(blue1x200.png) repeat-y;

The blue1x200.png is an image with just the color blue in it which has a height of 1 pixel and a width of 200 pixels. The repeat-y clarification tells the browser to repeat this image on the y axis, meaning up and down.

This solved our issue, so whatever was happening to the page nav or the page content it would not prevent the left 200 pixels on the page from showing up the same color as the background.

Using the url attribute to the background CSS will force the page to spawn another HTTP request to load the image. My designer had a trick for that too. He converted the image to a Base64 string representation and replaced the URL:

background: top left url('data:image/png;base64,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') repeat-y;

The encoded image looks like a lot of gobblygook, but the browser treats it as an image without having to make a new request to load something from the server. Check out the code.

You can use a site like this to convert your image toBase64.

If you've been doing Web Development for a long time, this sort of technique is probably not new to you, however I had never seen someone encode the images and include it in-line before. It's a cool technique.

How do I right align a div inside a div?

I was working with a client to create a specific layout on the page and I wanted to align a div inside another div. But, I couldn't use text-align because I didn't want to right align the text elements in the inner div. How do you do it?

First, create the outer div and inner div:

<div class="outerDiv">
<div class="innerDiv">
This is Text in the inner div<br/>
Some other Text

A simple div is inside another div, and the inner div has some text. The outer div's only purpose is a wrapper for positioning purposes. Both the outerDiv and innerDiv have CSS Styles attached.

This is the CSS for the outerDiv:

.outerDiv {
display: flex;
float : right;

It enables the outerDiv to use flexbox styling and floats the content to the right. Flexbox is an advanced way to position CSS elements.

The innerDiv doesn't need any special CSS styling to make this work, but let's give it a background color:

background: #e6e6e6;

Play with the code here.

The implementation is really simple once you figure it out; but sometimes getting there is a stumble.

Aligning Left Text, Center Text, and Right Text with CSS

I was building out an application for a client who wanted pagination on some tabled data. I needed to create a pagination bar that included a previous button on the left, a next button on the right, and a message in the center. In the old days I could implement something like this using tables, however I wanted to see if there was a CSS way to get the same layout. I found two separate, but great, implementations of this. This blog post will explain both of them.

Aligning Text with Float

My first attempt to implement this was to use the CSS float property. The float means that text moves out of its normal place in the container, usually moving to the left or right of the container. I could float some text to the right, some text to the left and keep some in the middle. Here is the CSS Style for left aligned text:

.leftAligned {
float : left;

This puts left aligned text to the left side of the div to contain our pagination header. Right aligned text is similar:

float : right;
text-align : right;

The float argument is specified as right so the rightAligned block will move to the right of the container. I also specified a text-align property to move the text all the way over to the right within the rightAligned container.

Finally, we need centered text:

.centeredText {
margin: 0 auto;
text-align : center;

This margin property is used to make sure that the centeredText can align right up against the right and left segments.

Use these in HTML:

<div class="leftAligned">Previous/div>

<div class="rightAligned">Next</div>
<div class="centeredText">Displaying 10-20 of 50</div>

Reviewing the code, you need to put the left and right aligned divs first, and the centered text last. This bugged a bit of my OCD, but worked almost perfectly.

Play with the code here. The Plunker sample uses some Angular code to simulate the forward and next navigation for sample purposes.

As the user was paginating through the data the previous and next links might disappear. When that happened the centered text would change spots. This wouldn't do. We could fix that by adding explicit widths to each div, which worked for the sample application. However my real world app was having problems with that, I believe due to other CSS conflicts. So, I went searching for a second way to accomplish this layout.

Aligning Text with CSS Tables

My second approach to was to use CSS Tables. You can use the display property in CSS to specify table, or table row or table cell.

First, create a table:

.table {
width : 100%;

The table CSS style specifies the display type as table and width of 100%. This parallels the HTML table tag.

Next, create a table row:

.tr {
width : 100%;

The table row specifies the display type as table-row. This parallels the HTML tr tag.

Now, the left-aligned text:

.leftAligned {
width : 25%;

The left aligned text specifies table-cell as the display type. The width is given as 25%. Next, the right aligned cell:

.rightAligned {
text-align : right;
width : 25%;

The right aligned table cell specifies table-cell as the display. It also right aligns the text with the text-align property and specifies the cell width as 25%.

Finally, create the centered text:

.centeredText {
text-align : center;
width : 50%;

The centered text also has a table-cell type. It also specifies the text-align to center the text; and the width is 50%. The three table cells have a combined width of 100%.

Finally, we need to create the table in the HTML. We'll use divs as the controllers. First, create the table div:

<div class="table">

Inside of that, put a table row:

<div class="tr">

Now put the main content inside the table row:

Displaying 11-20 of 50

Play with the Code Here. As with the previous sample, this uses some AngularJS magic to make the forward and next buttons work.

Final Thoughts

I was surprised at how hard it was to find resources to explain how to do this, so hopefully this helps someone. Both approaches work well, depending what you're doing. The limitation of the second approach--which is specifying table widths--is that if you have text that is expanding or contracting to unknown widths you may have odd layouts as the text grows beyond their containers. But, I'm sure that can be worked around if you run into the problem.

Sign up for DotComIt's Monthly Technical Newsletter

Make a two column layout in Bootstrap

Multi-column layouts are a common requirement when building building HTML web sites or applications. In the old days, we would just use an HTML table and be done with it. But, these days using CSS for layout is the preferred approach. Using HTML tables for layout is considered a bad idea. Bootstrap provides an easy way to create a two column layout.

Create the two column layout: The Old Way

If I were using HTML tables to create a two column layout, I'd do something like this:

<table style="width:100%">
<td><input type="text" /></td>
<td>Some Other Label</td>
<td><input type="text" placeaholder="second text" /></td>

This is an HTML table with two rows, and two cells in each row. This is simple, but the HTML can get complex if you are nesting tables to get specific layouts. When I started building HTML sites; this was the defacto standard for complex layouts.

Play with this sample!

Nowdays, CSS is considered superior for layout purposes than using lots of nested tables, and Bootstrap is a great framework to help you do that.

Import Bootstrap

The first step is to import the Bootstrap library into your HTML page. Bootstrap is primarily a CSS library, but also has a JavaScript portion. For the purposes of this article, we just need the CSS:

<link rel="stylesheet" href="" >

Now all of the Bootstrap CSS is available to our application.

The Bootstrap Grid System

Bootstrap includes styles for a grid system consisting of rows and up to 12 columns. These are the associated styles:

  • row
  • Col-md-1
  • Col-md-2
  • Col-md-3
  • Col-md-4
  • Col-md-5
  • Col-md-6
  • Col-md-7
  • Col-md-8
  • Col-md-9
  • Col-md-10
  • Col-md-11
  • Col-md-12

The first style, row, is used to dictate a row in the grid. Inside the row; you would use some combination of the column styles to dictate the length of your cell; across a 12 column row. The col-md-1 style would span across a single column. The col-md-6 style would span across 6 columns. The col-md-12 style would spread across 12 columns, or a whole row. When putting together layouts with this approach, I like to make sure the total number of cells matches 12 for each row.

Create the two column layout: With Bootstrap

Bootstrap styles can be used to create a similar layout to the one created earlier, with a table. First, create the Bootstrap row:

<div id="row">

Inside the row, we can create two separate columns. For the purposes of this article, both will use col-md-6, meaning each column will span 6 cells, totaling 12 cells:

<div class="col-md-6">
<div class="col-md-6">
<input type="text" />

The reason for making sure that the total number of columns used is equal to 12 is so that the next row will be placed under the first row; instead of next to it.

We can use the same approach for the second row:

<div id="row">
<div class="col-md-6">
Some Other Label
<div class="col-md-6">
<input type="text" placeaholder="second text" />

Play with the code here

Final Thoughts

The Bootstrap Grid system can be very powerful, especially when dealing with nested layout elements.

How do I display hidden text in my table on rollover using CSS?

I was building out an app for a client and they had some wireframes that showed a list of users. The wireframes had a bunch of user data; but the client wanted some of the data hidden until the user rolled over the table row. How do I do that? CSS is the answer.

First, create a CSS class:



Now, create a style for hidden data:

#tableWithHiddenData .rollOverText{

The display CSS element is used to control layout. By giving it the value of none; the information will, essentially, be hidden.

Next, we'll need some CSS to display the hidden text on hover:

#tableWithHiddenData tr:hover .rollOverText{

These are the three CSS elements that are needed, now lets create the table. Since, for my use case, I was displaying user data, our table will contain two columns. One for a user's name and one for the username. The a will always be displayed and a username that is only displayed on rollover:

<table id="tableWithHiddenData">
<td>Jeffry Houser</td>
<td><div class="rollOverText">jhouser</div></td>
<td>Someone Else</td>
<td><div class="rollOverText">someUser41</div></td>
<td>A Third User</td>
<td><div class="rollOverText">LuckyThird</div></td>

Try this out on Plunkr.

Sign up for DotComIt's Monthly Technical Newsletter

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version