如何仅用两句话显示长工具提示。 Blazor 工具提示组件

Question

我在我的 Blazor 应用程序中使用工具提示组件。它的工作非常好。我只是想知道我们怎样才能使文本看起来更像如果它是一个长文本，它只显示在两行中。下面是我的代码。我在 Tooltip.razor:

中合并了 css 文件

<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; }
}

在我的编辑表单中添加了以下代码：

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

你可以在我的图片中看到。长行显示为 6 行。我只想显示最多 2 行。

Answer 1

跨度上的硬编码宽度限制了宽度。虽然您可以在那里增加宽度，但响应更快的解决方案是使用宽度百分比或 css flex box 或 bootstrap 列。

如何仅用两句话显示长工具提示。 Blazor 工具提示组件

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

html

css

blazor

blazor-webassembly