Javascript 如何在我的列表中将文本从一行分隔到另一行

我已经创建了这个购物清单应用程序，它运行良好。我现在面临的唯一问题是把一根长长的绳子断到下一行。我正在使用word wrap，但它不起作用

所以当我输入一个很长的单词

（helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

（Helooooooooo

呜呜呜呜）

HTML:

请在此JS FIDLE查看完整的工作代码-

#加{
溢出：隐藏；
}
您可以使用一些文本区域来实现此要求。默认情况下，使textarea的高度看起来像文本框

您可以使用此插件
我假设问题出在
.item
元素中，而不是
输入
字段中

您需要按如下方式修改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;
}

请参见演示：

结果如下：


在
#item_list li
中，删除
溢出
、
空白
和
换行
的规则，这些规则是不需要的

不要浮动
.item

对于
.item
，设置
display:inline block
（
block
也有效），设置
分词：全部分词以处理长词，并设置
文本对齐：left
（覆盖先前的CSS规则，导致文本居中对齐）

注意：如果您不希望删除按钮浮动在任何描述文本上，请在
.item
中添加一些右边距或右边距。
文本框无法打断文本。。你应该为
不能这样做的文本区域设置文本。我不想在文本框中打断输入，我想在输入框下面的列表中显示输入时打断它。如果你用我的提琴输入一个长字符串，你会看到它一直在运行，部分字符串没有显示，并且被我的删除按钮重叠。我不想打断文本框中的输入，我想在输入框下面的列表中显示时打断它。如果你用我的提琴输入一个长字符串，你会看到它一直在运行，部分字符串没有显示，并且被我的删除按钮重叠。我不想打断文本框中的输入，我想在输入框下面的列表中显示时打断它。如果你用我的提琴输入一个长字符串，你会看到它一直在运行，部分字符串并没有显示出来，也没有被我的删除按钮重叠。谢谢，这就是我想要的。
.item {
  font-size: 15px;
  /* width: 50%; */
  color: #000;
  margin: 8px 0 0 20px;
  word-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
}

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

#add{
    overflow:hidden;
}

#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;
}