0

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

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

(Heloooooooooooooooooooooooooooooooooooooooooooo
)

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/

4

3 回答 3

2

我认为问题出在.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-spaceword-wrap

不要漂浮.item。

For .item， set display: inline-block（block也可以）， setword-break: break-all处理长词，并 set text-align: left（覆盖早期的 CSS 规则，导致文本居中对齐）。

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

于 2013-10-04T12:11:06.420 回答
0

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

你可以使用这个插件http://www.jacklmoore.com/autosize/

于 2013-10-04T12:00:37.620 回答
0 
<textarea id="add" type="text" placeholder="Type new item here" autocomplete="off" ></textarea>

#add{
    overflow:hidden;
}
于 2013-10-04T11:54:43.137 回答