html - 如何将图标定位在正确的位置以及何时获得较小的标签应该是省略号

Question

 <div class="rs-nav rs-nav-subtle rs-nav-horizontal rs-nav-justified">
      <ul>
        <li class="rs-nav-item">
          <a role="button" tabindex="0" class="rs-nav-item-content">HOME <i class="rs-icon rs-icon-close" style="font-size: 12px; margin-left: 4px; width: 12px;"></i>   </a>
        </li>
        <li class="rs-nav-item rs-nav-item-active">
          <a role="button" tabindex="0" class="rs-nav-item-content">ABOUT<i class="rs-icon rs-icon-close" style="font-size: 12px; margin-left: 4px; width: 12px; color: rgb(244, 67, 54);"></i></a>
        </li>
       </ul>
       </div>
<div class="rs-nav-waterline">

我在这里要做的是将图标定位在右边，然后在选项卡大于10时，文本应该是省略号。