jquery - 如何动态调整下拉文本来自的底线？

$('#select').on('change', function() {
  name = $('#select :selected').val();
  //some code here
});

. bdr-txtline {
  border-bottom: 1px solid black;
}

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div id="Name" class="bdr-txtline">
      </div>
    </div>
  </div>
</div>

当我选择任何选项时，我在页面1.html上有下拉菜单，因此这些数据动态地在另一页上具有边框底线。下拉菜单中的某些选项短3个单词，而一些则短7或8个单词，因此根据这些单词显示边框底行应该调整（增加或减少。
如何动态调整下拉文本在哪里的底线？我们可以考虑边框底线的宽度范围并对其进行处理吗

最佳答案

在display:inline-block中使用bdr-txtline。

.bdr-txtline {
  border-bottom: 1px solid black;
  display:inline-block
}

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div id="Name" class="bdr-txtline">
      two words
      </div>
    </div>
  </div>
</div>



<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div id="Name" class="bdr-txtline">
      more than two words
      </div>
    </div>
  </div>
</div>