CODEWITHSUNDEEP
htmlcsslist
Christopher
Christopher

Reputation: 45

How do I make this list not break lines when browser size is changed?

I am trying to optimize my site for mobiles but I can't get this "ul" to get displayed correct for the small devices. This is what the page looks like when the browser is still big enough:

Warcraft list style issue

Then when the browser is at it's smallest width:

enter image description here

You can see how the "company" text on one of the list elements breaks the line when it cant fit in the window. I want the text to have an ending with "..." at the end instead. How do I achieve this? 

<ul>
    <li><b><img class='icongo' src="worker67.png"/>Company:</b> <span style='float:right'>Legendary,Universal,Blizzard E</span></li>
    <li><b><img class='icongo' src="open163.png"/>Story:</b> Legendary’s "Warcraft" is a 3D epic adventure of world-colliding conflict based upon Blizzard Entertainment’s globally-renowned universe. Directed by Duncan Jones ("Moon," "Source Code") and written by Charles Leavitt and Duncan Jones, the film is a Legendary Pictures, Blizzard

Read more at http://www.comingsoon.net/movie/warcraft-2016#2AgLG7H8xtKTDjFb.99

current css for the list:

ul {
   margin: 0px;
   padding-left: 0px;
   list-style-type: none;
   width: 100%;
}
ul li {
   padding-bottom: 16px;
}

Upvotes: 1

Views: 60

Answers (2)

Pedram
Pedram

Reputation: 16595

use word-break: break-word;

ul li {
   padding-bottom: 16px;
   word-break: break-word;
}

jsFiddle Demo

note that do not insert <img/> tag inside <b> tag. as you see in example i moved them.

Upvotes: 1

Rasool Ghafari
Rasool Ghafari

Reputation: 4278

css media queries are rules that can be changed when the size of user device changed, for example you can use this query in your case:

@media(max-width: 400px) {
    ul li {
        font-size: 8px;
    }
}

but it isn't the standard way you should read more about css media querires and responsive desgins

Upvotes: 3

Related Questions