Question

我知道如果我使用100%作为容器的宽度，则无法截断文本。但是我需要将这个宽度应用到我的表中以将宽度设置为搜索栏，实际上我正在使用Bootstrap并且我有这个html结构：

<div class="col-sm-2 hideable-sidebar" id="resource_container">
            <h4>Resource</h4>

            <div class="input-group">
                <input type="text" placeholder="search" class="form-control" >
                <span class="input-group-btn">
                    <button class="clear btn btn-default" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    </span>
            </div>

            <table border='1' id='resource-container'>
            <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</strong><br>test</div></td></tr>
            <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest</div></td></tr>
            <tr id="res-1"><td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            </table>
        </div>

如何看到文本太长并且不在桌面上。我尝试用这样的css修复这种情况：

#resource-container
{
    margin-top:10px;
    width:100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

但不幸的是，这不起作用。有人可以帮帮我吗？感谢。

Answer 1

尝试将截断样式放在包含文本的元素上：

#resource-container {
    margin-top: 10px;
    width: 100%;
}

#resource-container td div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

修改：根据反馈，现在添加了在表格中使用所需的其他样式。

#resource-container {
  margin-top: 10px;
  width: 100%;
}
#resource-container td:nth-child(2) {
  width: 100%;
  max-width: 1px;
}
#resource-container td:nth-child(2) div {  
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="col-sm-2 hideable-sidebar" id="resource_container">
  <h4>Resource</h4>

  <div class="input-group">
    <input type="text" placeholder="search" class="form-control">
    <span class="input-group-btn">
                    <button class="clear btn btn-default" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
    </button>
    </span>
  </div>

  <table border='1' id='resource-container'>
    <tr id="res-1">
      <td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td>
      <td style="padding-left: 10px">
        <div><strong>foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</strong>
          <br>test</div>
      </td>
    </tr>
    <tr id="res-1">
      <td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td>
      <td style="padding-left: 10px">
        <div><strong>foo</strong>
          <br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest</div>
      </td>
    </tr>
    <tr id="res-1">
      <td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td>
      <td style="padding-left: 10px">
        <div><strong>foo</strong>
          <br>test</div>
      </td>
    </tr>
  </table>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

无法截断宽度为100％

1 个答案: