2014-01-14 67 views
0

我想让下面的代码以浏览器窗口大小的方式工作,以便每个网格单元格中的文本始终保留在屏幕上。如果没有更多的空间来显示文本,并且我希望文本在行上被拆分,则由于某种原因,以下代码会削减文本的末尾。如何在bootstrap 3网格中获得响应文本?

<html> 
<head> 
    <title></title> 
    <script src="scripts/jquery-2.0.3.js"></script> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" /> 
    <script src="bootstrap/js/bootstrap.js"></script> 
</head> 
<body> 

    <div class="container"> 
     <div class="row-fluid"> 
      <div style="background:gray" class="col-xs-12 col-sm-12 col-md-12"> 
       <h5 class="text-center">Title</h5> 
      </div> 
     </div> 

     <div class="row"> 
      <div style="background:green" class="col-xs-3 col-sm-3 col-md-3"> 
       <p>cell1cell1cell1cell1cell1cell1</p> 
      </div> 
      <div style="background:red" class="col-xs-3 col-sm-3 col-md-3"> 
       <p>cell2cell2cell2cell2cell2cel22</p> 
      </div> 
      <div style="background:blue" class="col-xs-6 col-sm-6 col-md-6"> 
       <p>cell3cell3cell3cell3cell3cell3</p> 
      </div> 
     </div> 

     <div class="row"> 
      <div style="background:gray" class="col-xs-12 col-sm-12 col-md-12"> 
       <button type="button" class="btn btn-default btn-sm pull-right"><i class="glyphicon glyphicon-remove"></i> Cancel</button> 
       <button type="button" class="btn btn-primary btn-sm pull-right"><i class="glyphicon glyphicon-ok"></i> Ok</button> 
      </div> 
     </div> 

    </div> 

</body> 
</html> 

回答

1

由于这些词中没有空格,因此这些词不会显示在2行中。它被视为一个单词。一个单词永远不会分成另一行。

在这些长词之间使用一些空格。然后,他们将在2行显示

希望这有助于你

0

ü应有权使用

字断:正常; 或 word-break:break-all;