时间戳

首页 > 解决方案 > “文本溢出：省略号”和“溢出：隐藏”在我的中无法正常工作，并出现水平滚动条

html - “文本溢出：省略号”和“溢出：隐藏”在我的中无法正常工作，并出现水平滚动条

问题描述

我正在做一个关于 Angular 的任务。作业要求：单行显示消息，用“...”修剪所有不必要的部分。

我设法通过在标签中添加“空白：nowrap”将消息变成一行，但是多行将成为溢出的单行。现在到了让我困惑的部分。我应该修剪线条并将“...”添加到溢出部分。尽管我在描述类中添加了诸如“文本溢出：省略号；溢出：隐藏；显示：内联块”之类的功能，但该行没有被修剪，也没有出现“...”。相反，出现了一个丑陋的水平滚动条，虽然我设法通过在“index.html”的标签中添加“overflow-x:hidden”来摆脱它，但它仍然不符合要求。

      .description {
         width: 100%;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         display: inline-block;
     }
   </style>
   <img matListAvatar src={{leader.image}} alt={{leader.designation}}>
   <p matline>
     <span>{{leader.name}}<br></span>
     <span>{{leader.designation}}<br></span>
     <span class="description"> {{leader.description}}</span>
   </p>

我希望消息在单行中传递，根据屏幕大小而不是像素进行修剪和添加“...”。谁能帮我吗？

编辑：

下面答案中的示例工作得很好。但这不是我的应用程序的情况。 在此处输入图像描述

我在 win 10 上使用 Edge 和 Chrome 检查了这个项目。不起作用。

GitHub 链接：https ://github.com/Z-Richard/Practice-Angular-Project.git

请告知我这个项目在您的计算机上是否有效。

标签： htmlcss

解决方案

我下载了您的代码并检查了问题是您的父<p>类没有定义宽度，因此子类无法正确计算宽度。所以我的解决方案是我基本上添加了<p matline class="contact-info">类并给它，width:98%然后一切都按预期工作。这是about.component.html的工作代码

     <mat-list-item>
        <style> .mat-list-item {
              min-height: 100px;
        }
        .contact-info{
          width:98%;
        }
        .description {
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          display: inline-block;
        }
        </style>
      <img matListAvatar src={{leader.image}} alt={{leader.designation}}>
      <p matline class="contact-info">
        <span>{{leader.name}}<br></span>
        <span>{{leader.designation}}<br></span>
        <span class="description"> {{leader.description}}</span>
      </p>
    </mat-list-item>

如果您有任何问题，请告诉我。

推荐阅读