css text truncate code example

Example 1: css all caps

.uppercase {
  text-transform: uppercase;
}

#example {
  text-transform: none;	/* No capitalization, the text renders as it is (default) */
  text-transform: capitalize;	/* Transforms the first character of each word to uppercase */
  text-transform: uppercase;	/* Transforms all characters to uppercase */
  text-transform: lowercase;	/* Transforms all characters to lowercase */
  text-transform: initial;	/* Sets this property to its default value */
  text-transform: inherit;	/* Inherits this property from its parent element */
}

Example 2: text overflow ellipsis css

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Example 3: css overflow truncate

//Truncate text overflow 
.element {
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

Example 4: css ellipsis max width

.text-ellipsis{
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Example 5: truncate text css

.element{

  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}