Truncation

Truncating text should only be used if there is a way to view the FULL content, either by:

1. Displaying the full string of text with a tooltip on hover
2. Expand/collapse button
3. Clicking on it opens in another screen

By default, truncation should be at the end of the string and can be implemented using text-overflow: ellipsis;

There may be times when showing only one line of text (and truncating) may not get the full point across. In this case, two lines can be displayed and truncate everything after that.

In situations where there are several truncated items with the same start of each word, phrase, it may be neccessary to truncate the middle of the string in order to show the difference at the end.

• Example: 3 campaigns titled “NBC 2022 Q1 Campaign Females 18-24,” “NBC 2022 Q1 Campaign Females 25-39,” and “NBC 2022 Q1 Campaign Males 18-24”
• Instead of truncating the end, resulting in all the strings appearing the same, truncate the middle of the string to highlight the uniqueness of each item
• Note: This will require understanding of the date to manually configure which part of the strings to show

Example: If the beginning part of every string is similar/or the same, truncating in the middle may be a better option Example: If text is not clickable/expandable to view the whole string, a tooltip should be provided.