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 或引导列。

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

1 个答案: