javascript - 如何将列表中的文本从一行换成另一行

Question

我已经创建了这个购物 list 应用程序并且运行良好。我现在面临的唯一问题是将长字符串断开到下一行。我正在使用自动换行，但它不起作用。

所以当我输入一个很长的词时 (Helooooooooooooooooooooooooooooooooo) 等。我希望它能打断这个词并在下一行显示它，比如

(Helooooooooooooooo
oooooooooooooooooooo)

HTML:

<div id="container">
    <input id="add" type="text" placeholder="Type new item here"
            autocomplete="off" autofocus/>
    <ul id="item_list">
        <li id="base" class="hidden">
            <input class="check" type="checkbox"> <span class="item">Item</span>
            <button class="delete_item hidden"></button>
        </li>
    </ul>
</div>

CSS:

.item {
  font-size: 15px;
  /* width: 50%; */
  color: #000;
  margin: 8px 0 0 20px;
  word-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
}

请在这个 JS Fiddle - http://jsfiddle.net/varunksaini/Zjxq5/10/ 中检查完整的工作代码

Answer 1

我假设问题出在 .item 元素而不是 input 字段。

您需要按如下方式修改您的 CSS:

#item_list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  xxoverflow: hidden;
  xxwhite-space: nowrap;
  text-overflow: ellipsis;
  padding: 10px 5px 10px 50px;
  text-transform: capitalize;
  xxword-wrap: break-word;
}

.check {  /* DO NOT float .item... */
  float: left;
  margin-left: -30px;
}

.item {
  font-size: 15px;
  /* width: 50%; */
  color: #000;
  margin: 8px 50px 0 20px; /* add right margin to allow for delete button */
  word-break: break-all;
  display: inline-block;
  text-align: left;
}

参见演示:http://jsfiddle.net/audetwebdesign/hpa87/

结果如下:

在#item_list li中，移除overflow、white-space和word-wrap规则，这些都不需要。

不要 float .item。

对于.item，设置display: inline-block(block也可以)，设置word-break: break- all 以处理长单词，并设置 text-align: left(覆盖较早的导致文本居中对齐的 CSS 规则)。

注意:如果您不希望删除按钮 float 在任何描述文本上，请向 .item 添加一些右填充或一些右边距。