javascript - 如何使用CSS在基于JavaScript的按钮中添加换行符

我已经使用DataTable创建了表。
看起来像这样：

我想要做的是像这样拆分它们：

如何使用自定义CSS来实现？
我的HTML看起来像这样：

<html>
    <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <link rel="stylesheet"  href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
    <link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
    <script type="text/javascript" language="javascript" src="./src/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="./src/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="./src/dataTables.colVis.min.js"></script>


    <script>
     $(document).ready(function() {
         $('.sortable-table').DataTable( {
                // Allow column selection, based on this
                // https://datatables.net/extensions/colvis/
                "dom": 'C<"clear">lfrtip',
                // Except first column,
                // it should stay.
                // https://datatables.net/extensions/colvis/options
                colVis:{exclude:[0]}
            });
         } );
         </script>
    <style>
    body {
        font-family: 'Helvetica Neue';
        margin:150px;
    }
    img {
        max-width:65%;
        max-height:65%;
    }
    </style>
    <title>Experiment 11</title>
    </head>
    <body>

    <h2> G. Shared functional  annotation</h2>
    Here the functional analysis is scored with <tt>-log(Pvalue)</tt>.
    <h3> LN </h3>
    <table border="1" class="dataframe sortable-table display compact pure-table">
  <thead>
    <tr style="text-align: left;">
      <th>GO</th>
      <th>FOO</th>
      <th>BAR</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>                regulation of response to wounding</td>
      <td>  6.850</td>
      <td> 11.975</td>
   </tr>
  </table>
    </body>
    </html>

最佳答案

根据您的示例：


<div class="ColVis" >
  <button class="ColVis_MasterButton">
    <span>Show / hide columns</span>
  </button>
</div>





  这是您用于该按钮的html，现在我们将CSS应用于该按钮



 .ColVis{
    width:100%
}
button.ColVis_Button{
    float:right
}





  为您的Colvis类和FLOAT提供Width 100％：右键单击。


注意 ：

如果可能的话，请为colvis和button应用新类，因为如果您更改colVis的样式，则它可能会更改您其他模板或其他布局中的样式，因此请先对其进行测试。

例如：http://jsfiddle.net/kevalbhatt18/urxk3q0z/2/


  当您在jsfiddle中首先看到淀粉的输出时，输出屏幕的大小
  这样您就可以看到正确的输出