html - 显示内联元素上的边框底部

Question

我认为这将是一个简单的 CSS 修复，但我似乎无法找到适用于所有情况的解决方案。

我正在尝试使 fiddle 波纹管中的“一些包装的标题”文本带有下划线，而下划线不会超出文本的长度。如果 .title-container 有 width: 200px;，我已经完成了这个，但是现在如果你改变类 .title-container 有一个width: 230px; 我希望下划线继续延伸并在文本“That”结束的地方结束。请看下面的图片了解我的意思。

fiddle :https://jsfiddle.net/bhde0rsq/31/

Answer 1

此代码最初会触发设置宽度，然后每当屏幕发生变化时，宽度始终等于标题宽度。

$(window).resize(function(){
  set_width(); // Triggers on resize
})

set_width(); // Initial Trigger

function set_width() {
  var title_width = $(".title h1").width();
  $(".my-underline").css("width",title_width + "px");
}

.title-container {
  width:200px;
  background: cyan;
}

.title h1 {
  display: inline;
  position: relative;
  background: yellow;
}

/* hr style */
.my-underline {
  height:5px;
  background-color:black;
  display:table;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-container">
  <div class="title">
    <h1>Some Title That Wraps</h1>
    <span class="my-underline"></span>
  </div>
</div>