CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Varun
Varun

Reputation: 1043

How to break text from one line to another line in my list

I have created this shopping list app and it is working fine. Only issue that I am facing now is breaking a long string to next line. I am using word-wrap but it is not working.

So When I enter a very long word (Helooooooooooooooooooooooooooooooo) etc. I want it to break the word and show it in next line like

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

Please check full and working code at this JS Fiddle - http://jsfiddle.net/varunksaini/Zjxq5/10/

Upvotes: 0

Views: 196

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

I assume that the problem is in the .item element and not the input field.

You need to modify your CSS as follows:

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

See demo at: http://jsfiddle.net/audetwebdesign/hpa87/

Results look like:

enter image description here

In #item_list li, remove the rules for overflow, white-space and word-wrap, these are not needed.

Do not float .item.

For .item, set display: inline-block (block also works), set word-break: break-all to take care of long words, and set text-align: left (overrides an earlier CSS rule causing text to be aligned center).

Note: If you don't want your delete button to float over any of the description text, add either some right padding to .item or some right margin.

Upvotes: 2

Miqdad Ali
Miqdad Ali

Reputation: 6147

You can use some textarea to achieve this requirement. By default make the height of textarea look like text box

You can use this plugin http://www.jacklmoore.com/autosize/

Upvotes: 0

Mohit Bumb
Mohit Bumb

Reputation: 2493

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

#add{
    overflow:hidden;
}

Upvotes: 0

Related Questions