处理卡溢出文本答案

【问题标题】：Handling card overflow text处理卡溢出文本
【发布时间】：2021-08-26 16:29:03
【问题描述】：

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

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

我已经尝试使用overflow-wrap、word-wrap、white-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>

EDIT2：

使用

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

不会有帮助，因为它不会破坏长文本行

解决方案here 会破坏间距

【问题讨论】：

分享你的代码，到目前为止你做了什么？
@RakeshK 检查编辑

标签： html css angular-material overflow styling

【解决方案1】：

word-break: break-all 会处理这个问题：

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

&lt;span&gt; 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 &lt;/span&gt;

添加了display: inline-block：

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

&lt;span&gt; 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 &lt;/span&gt;

【讨论】：

它不起作用，即使从包装器 div 中删除 overflow: hidden
必须有比我提供的简单 css 更具体的框架 css（我的意思是选择器）。尝试提高特异性。你可以试试!important 看看是否有帮助。如果确实有帮助，那么您应该提高特异性并摆脱!important。
我尝试应用 word-break: break-all 规则遍历所有 DOM 元素，直到最里面的元素，但它不会破坏文本
@AntonioSantoro 除了您提供的内容之外，您是否还有其他干扰这个的东西？当我简单地将它添加到 span 元素时，Rob 的解决方案对我有用。
我编辑了答案以匹配您对<span> 的使用，您可以在 sn-p 中看到它仍然有效，但边框的行为不同。尝试添加 display: inline-block 来修复该行为。

【解决方案2】：

尝试执行以下操作：

给一个类来保存文本。假设你给了一个名为 .token 的类，然后在 css 中这样做。

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

【讨论】：

不工作，你确定语法正确吗？
你使用的是css还是scss？
我正在使用css````