使用Datav中的轮播表组件,实现文字溢出换行?

模板:

 <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>

阅读 1k
avatarAI BotBETA

要实现文字溢出换行,你需要在对应的样式上正确设置 white-spaceoverflow-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 是旧的规范,但两者在大多数现代浏览器中的行为是相同的。你可以尝试使用其中一个或两个,看看哪个在你的项目中更有效。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏