Question

我试图在我的Rails应用程序中覆盖白色空间：nowrap在我的表单元格格式中，但无论我如何尝试都无法这样做。情况如下：

这是我的application.sass文件的顶部：

//= require_self
//= require datatable_styles
//= require calendar
//= require bootstrap-datepicker

正如你所看到的，在我需要datatable_styles之前我需要自我。 datatable_styles.sass具有以下关于表格白色空间的规则：

td, th
  white-space: nowrap

在大多数情况下，这样可以解决问题。但是，在我的一个表中，我有一个'notes'字段显示在一个表格单元格中，需要将白色空间设置为包装，因为它可以有多个长句子。以下是我试图覆盖它的方式：

这是我在HAML中的Rails视图，其中包含notes字段：

= render 'shared_projects/secondary_nav'
%h3
  Billable Notes for - #{@project.name}
%table.display.table.table-striped.table-bordered
  %thead
    %tr
      %th.date Date
      %th.notes Notes
  %tbody
    - @notes_array.each do |n|
      %tr
        %td.date
          = n[0]
        %td#billables-comments
          = n[1]

请参阅'td'单元格中的#billables-comments ID？我在application.sass文件中有一个相应的CSS规则，在require语句之后如下所示：

td#billables-comments
  white-space: wrap

但是这没有任何效果，在datatable_styles.sass文件中定义的white-space：wrap规则总是胜过application.sass文件中定义的更具体的td #billables-comments。我已经为单元规则定义尝试了各种组合，例如，自己定义#billables-comments。把！放在包裹前面这么重要：

td#billables-comments
  white-space: !important wrap

但似乎没有任何效果。

P.S。回答下面提出的问题：是的，我确实尝试在Google Chrome中检查此元素，我看到以下内容：

media="all"
td#billables-comments {
white-space: !important wrap;
}

但是，白色空格行有一个删除线表示此规则被下面显示的datatable_styles规则覆盖：

media="all"
td, th {
white-space: nowrap;
}

没有透视表明此规则有效。当我点击左侧白色空格上的复选框并取消选择它指示Chrome取消定义规则时，文本将完好无损。但我正在操纵引擎盖下的CSS。这不是解决方案:(

Answer 1

空白区属性的默认状态为normal，而不是wrap。

请注意，通过验证程序运行CSS会为您捕获此错误。 Chrome的检查员将删除所有无效/未知属性，而不仅仅是其他地方被覆盖的属性。

Rails应用程序中的CSS覆盖

1 个答案: