如何使用 CSS 将单词换到下一行？

Question

How can I make it look better for mobile: (break words by line)

I tried white-space, word-break, word-spacing, display:table-caption and can't make it work.

https://codepen.io/Jackkk/pen/zYYbvKY

 .nav>li { display: inline-block; } /* very simplified css*/

 <ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center"> <li class="tab active has-icon"><a href="#tab_meble-fryzjerskie"><span>Meble fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_fotele-fryzjerskie"><span>Fotele fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_myjnie-fryzjerskie"><span>Myjnie fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_konsolety-fryzjerskie"><span>Konsolety fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_pomocniki-fryzjerskie"><span>Pomocniki fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_meble-48h"><span>Meble 48h</span></a></li> </ul>

Link to example website: https://dobrzekupuj.pl/

Answer 1

Set a width or max-width to every li

For example

.nav > li {
    width: 70px;
}

or

.nav > li {
    max-width: 70px;
}

For mobile only put it on a media query

@media (max-width: 480px) {
    .nav > li {
        width: 70px;
    }
}

Answer 2

the table-layout set to fixed seems the best option to wrap all elements at once into 2 lines:

 ul { display: table; table-layout: fixed; margin: auto; border-spacing: 1vw 0; } li { display: table-cell; } /* makup/see me */ li {border:1px solid;} ul { border-spacing: 1vw 0; } * {margin:0; padding:0; box-sizing:border-box; }

 <ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center"> <li class="tab active has-icon"><a href="#tab_meble-fryzjerskie"><span>Meble fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_fotele-fryzjerskie"><span>Fotele fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_myjnie-fryzjerskie"><span>Myjnie fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_konsolety-fryzjerskie"><span>Konsolety fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_pomocniki-fryzjerskie"><span>Pomocniki fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_meble-48h"><span>Meble 48h</span></a></li> </ul>

to keep it always shrink to minimun, again the table-layout (not set to fixed here ) seems to be the best option:

 ul { display: table; width:0;/* will shrink/expand to fit content anyway */ margin: auto; border-spacing: 1vw 0; } li { display: table-cell; } /* makup/see me */ li {border:1px solid;} ul { border-spacing: 1vw 0; } * {margin:0; padding:0; box-sizing:border-box; }

 <ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center"> <li class="tab active has-icon"><a href="#tab_meble-fryzjerskie"><span>Meble fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_fotele-fryzjerskie"><span>Fotele fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_myjnie-fryzjerskie"><span>Myjnie fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_konsolety-fryzjerskie"><span>Konsolety fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_pomocniki-fryzjerskie"><span>Pomocniki fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_meble-48h"><span>Meble 48h</span></a></li> </ul>

Run both snippets in full page to see different behavior.

Note also, that some padding on your original code could also work to set your wrapping point earlier

---

from your update on codepen, the table-layout can be used only on li too.

 .nav>li { display: inline-table; } @media (max-width: 480px) {.nav>li { width: 0; border: solid; } } /* very simplified css*/

 <ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center"> <li class="tab active has-icon"><a href="#tab_meble-fryzjerskie"><span>Meble fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_fotele-fryzjerskie"><span>Fotele fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_myjnie-fryzjerskie"><span>Myjnie fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_konsolety-fryzjerskie"><span>Konsolety fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_pomocniki-fryzjerskie"><span>Pomocniki fryzjerskie</span></a></li> <li class="tab has-icon"><a href="#tab_meble-48h"><span>Meble 48h</span></a></li> </ul>

Answer 3

I would insert a <br> tag with a class attached that showed / hid the <br> depending on screen size.

Example:

HTML:

<p>FirstName<br class="line-break">LastName</p>

CSS:

/* Default for mobiles */
.line-break {
    display: block;
}

/* For tablets/desktops */
@media only screen and (min-width: 600px) {
    .line-break {
        display: none;
    }
}