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

Question

$('#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>

当我选择任何选项时，我在 page1.html 上有下拉列表，所以动态地那些数据在另一个页面上有边框底线。下拉有一些选项短 3 个单词和一些有 7 或 8 个单词所以根据这些词 bIwant 边框底线应该调整(增加或减少。如何在文本来自下拉列表的情况下动态调整边框底线？我们可以获取边框底线的宽度范围并对其进行处理

Answer 1

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

.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>