Text/ Structure breaking when resize the browser

Question

I have following structure: JSFiddle Demo

enter image description here

HTML & CSS Code is as following:

HTML:

<ul>
    <li class="test"> Hello </li>  
    <li class="test"> Welcome </li>
    <li class="test"> Test Process </li>
    <li class="test"> Text Message </li>
</ul>

CSS

ul{

    width: 100%;
}

.test{
    height:20px;
    width:20%;
    border: 1px solid black;
    border-radius: 3px;
    display: inline-block;
    float: left;
    margin-left: 5px;
    text-align: center;
}

When I resize the browser the <li> tag widget structure is working fine (Not breaking) but the text inside the widget are breaking like:

enter image description here

My question is How can I make the text inside the widget adjustable so that It will not break. Is there any way to fix this using only CSS ?

What exactly do you mean by "not break"? What do you want to happen? — Ronen Cypis, Jul 14 '14 at 10:59
maybe `@media screen` of CSS3 could help , check [similar question](http://stackoverflow.com/a/11777771/3419997) — turtle, Jul 14 '14 at 11:02
You can use `table-cell layout` as described here - [**Stack Overflow Question**](http://stackoverflow.com/questions/24629444/how-to-maximize-the-list-to-consume-max-space-using-css) — Paulie_D, Jul 14 '14 at 11:02

score 2 · Accepted Answer · answered Jul 14 '14 at 11:00

2

Provide

min-width:20%;

instead of

width:20%;

It should work..

Fiddle: http://jsfiddle.net/ZZa8j/2/

answered Jul 14 '14 at 11:00

Deepu Sasidharan

5,193
10
40
97

+1 for the answer. Yes, This approach is working but My box structure is also change while resizing the browser i.e. the size of box,text containing Hello is become small comparing with the others so not consistance. :) – Vaibhav Jain Jul 14 '14 at 11:26
li only have 20% width of ul. As ul's width decreases width of li also decreases.If you provide fixed width (in px), i think this problem can avoid. – Deepu Sasidharan Jul 14 '14 at 11:35
Ok. Thanks. Let me check with this approach using pixels. – Vaibhav Jain Jul 14 '14 at 11:38

score 2 · Answer 2 · edited May 23 '17 at 12:01

If you want it to expand accordingly, you can simply remove the explicit height and set a min-height like this.

If you want to clip the text and indicate the user that text is clipped, you can use the text-oveflow property like this.

.test{
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 /*other styles*/
}

If you actually want the content to expand as much as possible and scoll if not, you could use Paulie_D's table-cell approach like he mentioned in comments.

score 1 · Answer 3 · answered Jul 14 '14 at 11:00

1

Your images are blocked by my proxy so I'm not sure if it's the answer that you need, but you can avoid break between 2 words with the css property white-space.

white-space:nowrap;

see fiddle : http://jsfiddle.net/ZZa8j/4/

answered Jul 14 '14 at 11:00

ylerjen

4,109
2
25
43

score 1 · Answer 4 · answered Jul 14 '14 at 11:07

add min-width:450px; to the <ul>.

check my Fiddle Demo

CSS

ul{
    min-width:450px;
    width: 100%;
}

.test{
    height:20px;
    width:20%;
    border: 1px solid black;
    border-radius: 3px;
    display: inline-block;
    float: left;
    margin-left: 5px;
    text-align: center;

}

HTML

<ul>
    <li class="test"> Hello </li>
    <li class="test"> Welcome </li>
    <li class="test"> Test Process </li>
    <li class="test"> Text Message </li>
</ul>

user63762453 · Answer 5 · 2014-07-14T12:22:08.393

1

Result

Code Demo

Try :

overflow: hidden;
 min-width:100px;

Result Screenshot

edited Jul 14 '14 at 12:22

answered Jul 14 '14 at 11:08

user63762453

1,734
2
22
44

Working with overflow: hidden but Not able to see the full text in this case. – Vaibhav Jain Jul 14 '14 at 11:09
Did you check the JSfiddle link?? whole text is visible – user63762453 Jul 14 '14 at 11:10
added jsfiddle screenshot for you – user63762453 Jul 14 '14 at 11:16
1

Yes,Checked.Can you please resize the browser 3 to 4 times. It will break. – Vaibhav Jain Jul 14 '14 at 11:16
In that case you need to set `min-width` – user63762453 Jul 14 '14 at 11:21
Yes. Can you check this fiddle with both 'overflow:hidden' & 'min-width:20%'. http://jsfiddle.net/jvaibhav/ZZa8j/9/ . This approach is working but My box structure is also change while resizing the browser i.e. the size of box,text containing Hello is become small comparing with the others so not consistance. :) – Vaibhav Jain Jul 14 '14 at 11:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57269/discussion-between-vaibhav-jain-and-nivedita). – Vaibhav Jain Jul 14 '14 at 11:46

Text/ Structure breaking when resize the browser

5 Answers5