CODEWITHSUNDEEP
htmlcss
user3745870
user3745870

Reputation: 321

How to keep elements under a li element in the same line?

I want my elements under a li to display in the single line. If the characters exceeds the length of the div then it should wrap.

Here is the link of my fiddle.

http://jsfiddle.net/NmhB5/

Now I want that in that div my all element inside a li element should be in the same like. For Example:

O 1.abcdefghijklmnopqrstuvwxyz
O 2. 12345678901234567890

and like that. Now as we can see that it is exceeding the length of the div so I want to wrap it like this. 

O 1. abcdefghijklmnopqrstuv
     wxyz
O 2. 12345678901234567890

How can I do that?

Upvotes: 1

Views: 2200

Answers (3)

Harry
Harry

Reputation: 89750

You can do it using the below CSS:

span {
    display: block;
    word-break: break-all;
}

Also, given that you are effectively numbering the list again, why not use the ordered list (<ol>) tags instead of using an unordered list (<ul>) and then adding an extra span for the numbering.

I would recommend the below markup:

<div>
    <ol>
        <li>abcdefghijklmnopqrstuvwxyz</li>
        <li>123456789012345678901234567890</li>
    </ol>
    <ol>
        <li>abcdefghijklmnopqrstuvwxyz</li>
        <li>123456789012345678901234567890</li>
    </ol>
</div>

CSS:

div {
   right: 0px;
   width: 200px;
   border: double;
   position: absolute;
}

li {
    word-break: break-all;
}

Demo

Note: You may want to refer to this thread on when to use UL or OL in html?. But the crux of both this answer and the one posted by Paulie_D are the same in the sense that both use the word-break property.

Update: For wrapping around whole word to the next line when it overflows, you can use the below setting.

li {
    word-wrap: break-word;
    /* Webkit supports word-break: break-word; also but it seems to be non-standard */
}

Updated Demo

Upvotes: 2

Beep
Beep

Reputation: 2823

you know you can have a ordered list with numbers, for example http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=decimal-leading-zero

for example

html

<ol>
    <li> jguhiuo</li>
    <li> jhii</li>
</ol>

css

 ol#myList
{
list-style-type:decimal;
}

link http://jsfiddle.net/NmhB5/5/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

You could add this

span {
   display: inline-block;
   word-break:break-all; /* add this */
}

JSfiddle Demo

Upvotes: 3

Related Questions