Как разбить текст из одной строки в другую в моем списке

0

Я создал это приложение списка покупок, и он работает нормально. Только проблема, с которой я столкнулся сейчас, разбивает длинную строку на следующую строку. Я использую word-wrap, но он не работает.

Поэтому, когда я вхожу в очень длинное слово (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/

  • 2
    текстовое поле не может разбить текст .. вы должны для этого textarea
  • 1
    <input> не может этого сделать.
Показать ещё 1 комментарий
Теги:

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/

Результаты выглядят так:

Изображение 174551

В #item_list li удалите правила overflow, white-space и #item_list li word-wrap, они не нужны.

Не .item.

Для .item, установите display: inline-block (block также работает), установите word-break: break-all чтобы позаботиться о длинных словах и установите text-align: left (переопределяет более раннее правило CSS, в результате чего текст выравнивается по центру).

Примечание. Если вы не хотите, чтобы ваша кнопка удаления плавала над текстом описания, добавьте либо правильное дополнение к .item либо некоторое правое поле.

Поделиться
  • 1
    Спасибо, это то, что я хотел.
0 
<textarea id="add" type="text" placeholder="Type new item here" autocomplete="off" ></textarea>

#add{
    overflow:hidden;
}
Поделиться
  • 0
    Я не хочу прерывать ввод в текстовом поле, я хочу разорвать его, когда он отобразился в моем списке под полем ввода. Если вы воспользуетесь моей скрипкой и введете длинную строку, вы увидите, что она продолжается и часть строки не отображается и не перекрывается моей кнопкой удаления.
0

Вы можете использовать некоторую текстовую область для достижения этого требования. По умолчанию сделать высоту textarea похожим на текстовое поле

Вы можете использовать этот плагин http://www.jacklmoore.com/autosize/

Поделиться
  • 0
    Я не хочу прерывать ввод в текстовом поле, я хочу разорвать его, когда он отобразился в моем списке под полем ввода. Если вы воспользуетесь моей скрипкой и введете длинную строку, вы увидите, что она продолжается и часть строки не отображается и не перекрывается моей кнопкой удаления.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню