如何为内联<ul>/<li>列表实现文本溢出省略效果？

要实现语义化的

/
• 列表同时保留整体溢出省略效果，核心是通过CSS把列表改成内联排列，并给容器添加溢出省略规则，同时用CSS伪元素处理逗号分隔（避免手动添加逗号带来的冗余问题）。

  完整实现代码 #

  HTML

  <ul class="inline-ellipsis-list">
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
  </ul>
  

  CSS

  .inline-ellipsis-list {
    /* 基础容器样式，和原p标签一致 */
    border: 1px solid black;
    width: 300px;
    padding: 5px;
    /* 重置ul默认样式 */
    margin: 0;
    list-style: none;
    /* 核心溢出省略规则 */
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }
  
  .inline-ellipsis-list li {
    /* 让li内联排列，形成一行 */
    display: inline;
  }
  
  .inline-ellipsis-list li:not(:last-child)::after {
    /* 自动给非最后一个列表项添加逗号分隔符 */
    content: ', ';
  }
  

  Angular 10适配写法 #

  如果是用*ngFor动态生成列表，两种方式都可以：

  1. CSS伪元素方式（推荐，模板更简洁）

  <ul class="inline-ellipsis-list">
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
  

  直接用上面的CSS即可，无需修改模板。

  2. 模板内判断添加逗号

  <ul class="inline-ellipsis-list">
    <li *ngFor="let item of items; let last = last">
      {{ item }}
      <ng-container *ngIf="!last">, </ng-container>
    </li>
  </ul>
  

  关键原理说明 #

  1. 列表内联化：将li设置为display: inline，让所有列表项在同一行排列；给ul添加white-space: nowrap，强制整个列表内容不换行。
  2. 整体溢出控制：给ul设置overflow-x: hidden和text-overflow: ellipsis，当整个列表内容超出容器宽度时，自动显示省略号。
  3. 语义化与屏幕阅读器支持：ul和li是原生语义化列表标签，屏幕阅读器会自动识别为列表结构，比原有的span方案 accessibility 更好。

  内容的提问来源于stack exchange，提问作者ineedtoknow