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

Question

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

我设法通过在标签中添加“white-space: 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

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

Answer 1

我下载了您的代码并检查了问题是您的父 <p> 类没有定义 width，因此子类无法正确计算 width。所以我的解决方案是我基本上添加了<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>

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

Answer 2

你的代码对我来说就像一个魅力。我认为这与您跨度的样式无关。

我检查了所有主要浏览器，似乎没问题：https://codepen.io/Sixl/pen/gZRxYR

.description {
   width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-block;
   background-color: yellow;
}

<p>
<span>Lorem ipsum.</span><br>
<span>dolor sit amet</span><br>
<span class="description">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</p>