How to display the long tooltip in two sentences only. Blazor Tooltip component

I am using tooltip component in my Blazor app. Its working wonderfully. I just want to know how can we make the text appear much well like if its a long Text its displayed in two lines only. Below is my code. I have combined css file in Tooltip.razor:

<style>
    .tooltip-wrapper {
        position: relative;
        display: inline-block;
       /* border-bottom: 1px dotted black;*/
        cursor: help;
    }

    span {
        visibility: hidden;
        position: absolute;
        width: 120px;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
        background-color: #363636;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        z-index: 1;
    }

        span::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip-wrapper:hover span {
        visibility: visible;
    }

</style>


<div class="tooltip-wrapper">
    <span>@Text</span>
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public string Text { get; set; }
}

Added below code in my editform:

 <Tooltip Text="Enter the name of the Partner. We will send an invitation to this contact to join us">
 <label>Name</label>
 </Tooltip>

You can see in my image. Long line is displayed in 6 lines. I want just 2 lines display max.