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

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

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

Answer 1

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