Rails 应用程序中的 CSS 覆盖

Question

我正在尝试在 Rails 应用程序的表格单元格格式中覆盖 white-space: nowrap，但无论我如何尝试都无法这样做。情况如下：

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

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

如您所见，在需要 datatable_styles 之前，我需要 self。 datatable_styles.sass 具有以下与表 th td 空白有关的规则：

td, th
  white-space: nowrap

在大多数情况下，这是可行的，所以这不是问题。但是，在我的一个表格中，我有一个“注释”字段显示在表格单元格中，需要将空格设置为换行，因为它可以有多个长句子。这是我试图覆盖它的方式：

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

= 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-cmets id 了吗？在我的 application.sass 文件中，我在 require 语句之后有一个相应的 CSS 规则，如下所示：

td#billables-comments
  white-space: wrap

但这没有效果，datatable_styles.sass 文件中定义的 white-space: wrap 规则总是胜过 application.sass 文件中定义的更具体的 td#billables-cmets。我为单元格规则定义尝试了各种组合，例如，自己定义#billables-cmets。将 !important 放在 wrap 的前面，如下所示：

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

但似乎没有任何效果。

附：针对下面提出的问题：是的，我确实尝试在 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 的检查器将删除所有无效/未知的属性，而不仅仅是在其他地方被覆盖的属性。