ul{
listy-style-type: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
.an{
width: 300px;
}
ul li{
display: inline-block;
padding: 14px 16px;
color: #f0f;
border-bottom: 1px solid #f0f;
transition: .2s;
border-radius: 5%;
width: 10%;
}
ul li:hover{
background: linear-gradient(to top, #ff00ff -4%, #3366cc 28%);
color: #00ff00;
padding: 10px 16px;
}
<ul>
<li>Jquery</li>
<li>HTML 5</li>
<li>JavaScript</li>
<li>CSS 3</li>
<li>PHP</li>
<li>C#</li>
</ul>
<br ><br ><br >
<ul class='an'>
<li>Jquery</li>
<li>HTML 5</li>
<li>JavaScript</li>
<li>CSS 3</li>
<li>PHP</li>
<li>C#</li>
</ul>
Pessoal olhem só estes 2 menus, o primeiro funciona banaca tudo certo e ok!
Porém quando limitamos o espaço que ele ocupa seja definindo uma width especifica menor que o necessário ou quando redimensionamos a tela, acontece essa 'quebra de linha'.
Existe alguma forma de conseguir detectar esta quebra de linha antes mesmo que ela aconteça?
Por Exemplo: Se eu estiver redimensionando a tela e a quebra de linha for acontecer eu consiga chamar uma função que irá resolver o problema.
OBS: É possível fazer isso definindo @medias(CSS) ou pelo innerWidth(JS) porém eu preciso saber a posição exata em que ele irá quebrar e colocar no código. Se fosse possível, gostaria de conseguir fazer isso sem conhecer o ponto onde ele quebra.