如何將文本從一行分割到我列表中的另一行

我已經創建了這個購物清單應用程序，它工作正常。只有我現在面臨的問題是打破長串到下一行。我正在使用自動換行但它不起作用。如何將文本從一行分割到我列表中的另一行

所以當我進入一個很長的單詞(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/

來源

2013-10-04 Varun

textbox無法打破文字..你應該爲你的textarea –

''不能這樣做。 –

我不想在文本框中打破輸入，我想在輸入框下方的列表中顯示時將其分開。如果您使用我的小提琴並輸入一個長字符串，您會看到它繼續前進，部分字符串不會顯示，並且會被我的刪除按鈕重疊。 – Varun

我認爲這個問題是在.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/

結果如下：

enter image description here

在#item_list li，刪除規則overflow ，white-space和word-wrap，這些都不需要。

不要浮動.item。

對於.item，設置display: inline-block（block也適用），設置word-break: break-all照顧長字，並設置text-align: left（覆蓋先前的CSS規則導致文本對齊中心）。

注：如果您不希望您的刪除按鈕漂浮在任何說明文字，加或者一些右填充到.item或某些右邊距。

來源

2013-10-04 12:11:06

謝謝，這就是我想要的。 – Varun

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

#add{ 
    overflow:hidden; 
}

來源

2013-10-04 11:54:43

你可以使用一些文本區域來實現這一要求。默認情況下，使textarea的高度看起來像文本框中

你可以使用這個插件http://www.jacklmoore.com/autosize/

來源

2013-10-04 12:00:37

我不想在文本框中輸入內容，我想在輸入框下方的列表中顯示時將其分開。如果您使用我的小提琴並輸入一個長字符串，您會看到它繼續前進，部分字符串不會顯示，並且會被我的刪除按鈕重疊。 – Varun

如何將文本從一行分割到我列表中的另一行

回答

相關問題