Detect line break before it happens

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>

Personal look at these 2 menus, the first works banana all right and ok!

But when we limit the space it occupies by setting a specific width smaller than necessary or when we resize the screen, this 'line break' happens.

Is there any way I can detect this line break even before it happens?

For example: If I am resizing the screen and the line break is happening I can call a function that will solve the problem.

NOTE: It is possible to do this by setting @media (CSS) or innerWidth (JS) however I need to know the exact position in which it will break and put in the code. If it were possible, I would like to be able to do this without knowing the point where it breaks.