'CSS width not fitting content and wraps for longer text

I am using primeng tooltip to display tooltip. I want the text to fit the content without wrapping and dont want to set fixed width.

following style not working for me.

        <a
            *ngIf="option.url"
            id="main-nav-{{ option.id }}"
            class="main-option"
            (click)="customNavigate(option)"
            [pTooltip]="option.label"
        >
            <i class="fas fa-fw" [class]="option.icon"></i>
            <span>{{ option.label }}</span>
        </a>

.p-tooltip .p-tooltip-text {
    background: $dark;
    color: $light;
    line-height: 2.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.4rem;
    vertical-align: middle;
    z-index: 999999997;
    max-width: 14rem;
    border: solid 1px red;
}

In the below first image, how to get 'Event Reporting' in single line? enter image description here

enter image description here

with white-space: nowrap enter image description here

csssassprimeng


Solution 1:[1]

Adding following to the above style worked for me:

white-space: nowrap;
max-width: fit-content;
width: 100em;

Solution 2:[2]

Try this.

white-space: nowrap;
width: fit-content;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mukil Deepthi
Solution 2 mahan

Related Questions