前端 - 使用Datav中的轮播表组件，实现文字溢出换行？

Question

模板：

 <div style="              flex: 0 1 70%;              display: flex;              flex-direction: column;              justify-content: space-between;            "          >            <span style="flex: 0 1 8%">{{ $t("ngMsg.text") }}</span>            <dv-border-box-13 style="flex: 0 1 92%;display:flex;                                     flex-direction:column;">              <dv-scroll-board                style="width:95%;height:90%;padding-left:3%;padding-top:3%"                :config="ngMsgconfig"                ref="ngMsg"              />            </dv-border-box-13>          </div>

CSS

 .border-box-content {    .dv-scroll-board {      .header {        height: 70px;      }    }    ::v-deep .rows {      ::v-deep .ceil {        padding: 0 20px;        box-sizing: border-box;        white-space: normal; /* 允许文本换行 */        overflow-wrap: break-word; /* 在单词边界处换行 */      }    }  }

修改轮播rows样式不生效，但是hearder可以生效。
在组件外层包裹一个div姐可以实现文字换行

<div><dv-scroll-board                style="width:95%;height:90%;padding-left:3%;padding-top:3%"                :config="ngMsgconfig"                ref="ngMsg"              /></div>

Answer 1

要实现文字溢出换行，你需要在对应的样式上正确设置 white-space 和 overflow-wrap 属性。根据你给出的代码和模板，看起来你已经在 .ceil 类中尝试设置这些属性了。但是，由于你提到修改 rows 样式不生效，但 header 可以生效，这通常是因为样式选择器没有正确匹配到目标元素，或者样式被其他更具体的选择器覆盖了。

请尝试以下步骤来解决这个问题：

1. 确认选择器是否正确：确保 .ceil 类确实应用到了你希望换行的文本元素上。检查 HTML 结构，看看是否有任何拼写错误或结构错误。
2. 检查样式的优先级：CSS 中，更具体的选择器通常具有更高的优先级。检查是否有其他样式规则（可能是内联样式、更具体的类选择器或 ID 选择器）覆盖了你的 .ceil 样式。
3. 使用开发者工具调试：在浏览器的开发者工具中，检查 .ceil 类的元素，并查看它的计算样式（computed styles）。这将显示哪些样式规则正在应用，以及哪些规则被覆盖了。
4. 确保样式加载正确：检查 CSS 文件是否已被正确加载到页面中。如果使用了模块化的 CSS（如 Vue 的 scoped CSS 或 React 的 CSS Modules），请确保选择器正确匹配了组件的局部作用域。
5. 清除缓存：有时候，浏览器缓存可能导致你看到的不是最新的样式。尝试清除缓存或强制刷新页面。
6. 尝试更通用的选择器：如果 .ceil 选择器不生效，尝试使用更通用的选择器（比如直接选择元素类型）来确保样式能被应用。

如果以上步骤都不奏效，你可能需要更深入地检查你的项目结构和样式规则，以找出为什么 .ceil 样式没有生效的原因。此外，如果你使用的是 Datav 或类似的特定框架或库，确保你遵循了它们的样式应用规则。

最后，请注意，overflow-wrap: break-word; 在现代浏览器中是等效于 word-wrap: break-word; 的。overflow-wrap 属性是较新的规范，而 word-wrap 是旧的规范，但两者在大多数现代浏览器中的行为是相同的。你可以尝试使用其中一个或两个，看看哪个在你的项目中更有效。