Truncate String with Ellipsis

truncate.css

/*
 * Accessibility wise, it may bring up various issues.
 *
 * Long file names with similar names, for example:
 *
 *    + Gauntlet I - In The Beginning - becomes - Gauntlet I
 *    + Gauntlet II - In The Middle   - becomes - Gauntlet I...
 *    + Gauntlet III - In The End     - becomes - Gauntlet I...
 *
 * The only way to overcome this is to either produce shorter titles
 * or redesign/rethink the presentation layout.
 *
 */

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}