0

この買い物リスト アプリを作成しましたが、問題なく動作しています。私が今直面している唯一の問題は、長い文字列を次の行に分割することです。ワードラップを使用していますが、機能していません。

そのため、非常に長い単語(Helooooooooooooooooooooooooooooooo)などを入力すると、単語を分割して次の行に表示したい

(へろおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
))

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のルールを削除します。これらは必要ありません。overflowwhite-spaceword-wrap

浮かないでください.item。

の場合.item、set display: inline-block(blockこれも機能word-break: break-allします)、set は長い単語を処理し、set text-align: left(テキストを中央揃えにする以前の CSS ルールをオーバーライドします)。

注:削除ボタンを説明テキストの上に浮かせたくない場合は、右パディング.itemまたは右マージンを追加します。

于 2013-10-04T12:11:06.420 に答える
0 
<textarea id="add" type="text" placeholder="Type new item here" autocomplete="off" ></textarea>

#add{
    overflow:hidden;
}
于 2013-10-04T11:54:43.137 に答える
0

この要件を満たすために、いくつかのテキストエリアを使用できます。デフォルトでは、テキストエリアの高さをテキストボックスのようにします

このプラグインを使用できますhttp://www.jacklmoore.com/autosize/

于 2013-10-04T12:00:37.620 に答える