处理卡片溢出文本

Question

我有这个卡片容器来显示一些溢出的文本

我需要将文本包裹在卡片容器内，并需要容器调整其高度以显示所有包裹的文本。

我已经尝试使用 overflow-wrap、word-wrap、white-space 等选项但没有成功，文本不会中断并填充下面的白色 space。

这张卡片是 Angular Material 图书馆的一张 mat-card。

编辑：html 组件代码

<mat-card>

    <mat-card-content>
        <mat-list>
            <mat-list-item>
                <mat-icon matListIcon>tag</mat-icon>
                <p matLine> <b> ID </b> </p>
                <p matLine>
                    <span matLine> id </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>edit_attributes</mat-icon>
                <p matLine> <b>TYPE</b> </p>
                <p matLine>
                    <span> type </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>games</mat-icon>
                <p matLine> <b>CONTROLLER</b> </p>
                <p matLine>
                    <span> controller </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>vpn_key</mat-icon>
                <p matLine> <b>PUBLIC KEY</b> </p>
                <p matLine>
                    <span> 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 </span>
                </p>

            </mat-list-item>
        </mat-list>

    </mat-card-content>

</mat-card>

编辑 2：

正在使用

span {
  word-break: break-all;
  border: 1px solid red;
  display: inline-block;
}

不会有帮助，因为它不会打断长文本行

解决方案会打破间距

Answer 1

word-break: break-all 将处理：

span {
  word-break: break-all;
  border: 1px solid red;
}

<span> 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 </span>

已添加 display: inline-block：

span {
  word-break: break-all;
  border: 1px solid red;
  display: inline-block;
}

<span> 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 </span>

Answer 2

尝试执行以下操作：

给出一个 class 来跨越其中的文本。假设您给 class 命名为 .token 然后在 css 中执行此操作。

::ng-deep .token {
      word-break: break-all;
}

处理卡片溢出文本

Handling card overflow text

html

css

overflow

styling

angular-material