Question

编辑：解决了问题的第一部分，仍然需要解决第二部分。

以下是我正在制作的app的演示。我正在实现一个功能，允许将子任务添加到任何一个待办事项任务，并在您单击任务时显示。但是，如果存在具有长描述的任务，例如：

<li>veryveryverylongstringveryveryverylongstringveryveryverylongstringveryveryverylongstringveryveryverylongstringveryveryverylongstringveryveryverylongstringveryveryverylongstring</li>

列表将溢出并增加表格的宽度（点击小提琴上的任何任务，看看我在说什么）。这是我想要解决的第一个问题。我已经尝试使用CSS来解决这个问题，例如word-wrap：break-word和其他stackoverflow帖子的其他建议，但对包含列表的div元素无效：

<div class="container" ng-show="thisTodo.showSubtask" style="background-color:red">

问题1：如何确保列表元素将换行并保持表格的原始大小？

我遇到的另一个问题是

<li>
<label>
<input type="checkbox">
</label>
<input type="form-control">
<button class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-plus"></i></button>
</li>

不会填满它所在的细胞的整个宽度。我不太确定如何解决这个问题。

任何建议表示赞赏。

非常感谢。

Answer 1

第一个问题：你试过这个吗？

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

在黑暗中刺伤，现在必须上床睡觉。 Give this a spin，也许你可以从中学到一些东西，即使它不完美。

第二个问题：最后一列的td宽度太宽，也许这可能有帮助吗？

.table td:last-child, .table td:first-child {
    width: 1px;
}
// or more specific (less hacky)
.table td:first-child {
    width: 30px;
}
.table td:last-child {
    width: 52px;
}

第3个问题（额外学分）：表格中主要内容上方/下方的列数太少/很多会导致不必要的行为。 3倍TD意味着你也应该有3倍TH。

<thead>
    <tr>
        <th><i class="glyphicon glyphicon-check"></i></th>
        <th>Task</th>
        <th></th>
    </tr>
</thead>

在标题中添加第三列可以消除一些顶部边框1垂直像素错误。

jsfiddle demo

Answer 2

.li{
word-break: break-all;  
}

还可以帮助分解角色以调整宽度。

Answer 3

您可以尝试为包含该长文本的word-wrap: break-word设置max-width和<li>。如果你想填充容器的宽度，我建议你阅读引导网格系统http://getbootstrap.com/css/#grid。您可以使用内部包含3列的<div class="row">：

<div class="col-md-3">{content}</div>

<div class="col-md-6">{content}</div>

<div class="col-md-3">{content}</div>

此处提供更多信息：https://getbootstrap.com/examples/grid/

<ul>中的大小调整和文本换行问题

3 个答案: