如何在列表中将文本从一行拆分为另一行

Question

我创建了这个购物清单应用程序，它运行正常。我现在面临的唯一问题是将长字符串打到下一行。我正在使用自动换行，但它无效。

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

  

（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小提琴上查看完整且有效的代码 - 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的规则，不需要这些规则。

不要漂浮.item。

对于.item，设置display: inline-block（block也有效），设置word-break: break-all以处理长字，并设置text-align: left（覆盖较早的字段） CSS规则导致文本对齐中心）。

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

Answer 2

<textarea id="add" type="text" placeholder="Type new item here" autocomplete="off" ></textarea>

#add{
    overflow:hidden;
}

Answer 3

您可以使用一些textarea来达到此要求。默认情况下，textarea的高度看起来像文本框

您可以使用此插件http://www.jacklmoore.com/autosize/