僅爲包裝文本的底部添加邊框

Question

我試圖在適合底部文本行寬度的一些包裝文本上實現下劃線，而只顯示底部底部線條的底部。圖1示出所期望的效果

圖1

使用該HTML：

<h2><span class="inline-block">optatur, volendit inum simolor</span></h2> 

和設置span到display:inline;我可以得到下劃線與的寬度完全適合文字，但它強調了所有的文字。

或者，設置span到display:inline-block;我能得到下劃線只底線下出現，但隨後它填補母公司的整個寬度。

對於上面的例子中看到這個的jsfiddle：http://jsfiddle.net/PWDV7/1/

有什麼辦法來實現圖1的結果呢？

Answer 1

有了一個良好的腿從this answer到一個找到線包裝的問題，我設法想出了這個解決方案（簡稱，它涉及到使用JS以找到一個換行發生和環繞所有文本跨度在最後一行坐）：

function underLineText() { 
    $underlined_text.each(function(){ 
     var $this = $(this); 
     var text = $this.text(); 
     var originalText = text; 
     var breakWords = new Array(); 

     //split the words into individual strings 
     var words = text.split(' '); 

     //find the height of the first word 
     $this.text(words[0]); 
     var height = $this.height(); 

     //if there is more than one word 
     if (words.length > 1) { 
      //loop through all the words 
      for(var i = 1; i < words.length; i++){ 
       $this.text($this.text() + ' ' + words[i]); 

       //check if the current word has a different height from the previous word 
       //if this is true, we have witnessed a word wrap! 
       if($this.height() > height){ 
        height = $this.height(); 
        //add the first word after the wrap to a predefined array 
        breakWords.push(words[i]); 
       } 

       //on the last iteration on the loop... 
       if (i === words.length - 1) { 
        if (breakWords.length > 0) { 
         //select the last word of the breakWords array 
         //(this is to handle cases where there there are more than one line or word wraps) 
         var breakStartAt = breakWords[breakWords.length - 1]; 
         //add a span before the last word 
         var withSpan = '<span>'+breakStartAt; 
         //replace the last occurrence of this word with the span wrapped version 
         //(this is to handle cases where there are more than one occurrences of the last word) 
         originalText = originalText.replaceLast(breakStartAt,withSpan); 
         //close the last line with a span 
         originalText += "</span>"; 

        } 
       } 
      } 
     } 
     //if there are no word wraps, wrap the whole text in spans 
     else { 
      originalText = '<span>'+originalText+'</span>'; 
     } 

     //replace the original text with the span-wrapped mod 
     $(this).html(originalText); 
    }); 
} 

你可以看到它在這裏工作：http://jsfiddle.net/PWDV7/5/

Answer 2

更改代碼，如下所示：

HTML

<h2>optatur, volendit <span>inum simolor</span></h2> 

CSS

h2 { 
    width:200px; 
    text-align:center; 
} 
h2 span { 
    border-bottom:3px solid black; 
    width:100%; 
} 

所有我改變是<span>的包裹，你想要的文字位置邊界上。

JsFiddle