Long Text Button Approaches

Use the Browser Resizer to check how the buttons respond to smaller width devices.

• Note that all (anchor) buttons are display: inline-block in this demo, but then full width at <767px.
• Both "buttons" and "anchor buttons" would need the desired style treatments.
• The Ellipsis and Stacking Text styles activate <480px with a media query and can be adjusted as needed.

1) Native Bootstrap 4 — white-space: nowrap;

2) Bootstrap 4 Button Override: Ellipsis — overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

3) Bootstrap 4 Button Override: Stacking Text — white-space: normal;

Here is the style added to the main Pubs stylesheet that should affect all buttons/anchor buttons:

@media only screen and (max-width: 480px) {
    .btn-pubs-1, .btn-pubs-2, .btn-pubs-3, .btn-pubs-4, .btn-pubs-5, .btn-pubs-6, .btn-pubs-7, .btn-pubs-8, .getftr-1, .getftr-2, .btn-outline, .btn-textbutton {
        white-space: normal !important;
    }
}

Note: On 12-5-2024, removed the media query for this style to have this apply to buttons in any browser width (due to grid widths having problems with longer buttons with going through the double-pane design for the search results page V2).

Other methods for handling long button text

The easiest approach is choose smaller text strings, but if that's not possible, you can also use responsive utilities to switch longer text strings on larger width screens and shorter text strings on smaller width screens. This technique can be done in conjunction with the Ellipsis and Stacking Text styles if it makes sense.

In this example, "FULL TEXT FROM PUBLISHER" switches to "FULL TEXT" on screens <480px.