只给换行文本的底部添加边框

Question

我想要在一些换行的文本上实现下划线，使其适应底部文本行的宽度，同时只出现在该底部行下方。图1显示了所需效果。

图1

使用以下HTML：

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

通过将设置为display:inline;，我可以使下划线与文本宽度完美契合，但这会让所有文本都带有下划线。

或者，通过将设置为display:inline-block;，我可以使下划线仅显示在底部，但它会填充整个父元素的宽度。

请参见此JSfiddle以获取上述示例：http://jsfiddle.net/PWDV7/1/ 是否有任何方法可以实现图1的结果？

- bravokiloecho

---

@Pranavc 如果你要注释某些内容，只有在使用HTML5时才应该使用<u>标签，而不应该在HTML 4中使用它。否则，你应该使用CSS来添加下划线。 - Pete

非常有趣的问题。 - Jordan Gray

这真是令人发狂。我可以给最后一行的长度加下划线，但当它居中时就不行了。我甚至考虑过使用JavaScript。 - Jordan Gray

嗨，乔丹！很高兴你开始加入这个头疼的项目了！如果需要的话，我很乐意提供一个JavaScript解决方案... - bravokiloecho

最终我用一些JS解决了它！（见下文。） - bravokiloecho

Answer 1

在这个答案关于查找换行符的问题上得到了很好的启示，我设法想出了这个解决方案（简而言之，它涉及使用JS查找换行符所在的位置，并在最后一行的所有文本周围包裹一个span）：

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/

- bravokiloecho

---

完全忘记了这个问题！这基本上是我的想法方向；我最接近的方法是在定位的 after 伪元素上使用边框，但这只适用于文本左对齐的情况。干得好！ - Jordan Gray

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

- AfromanJ

---

我猜原帖作者不想在HTML中明确指定哪一部分文本会被加下划线。 - DaniP

你可以使用 text-decoration:underline; 代替 border-bottom。 - Pranav C Balan

这取决于您希望边框有多粗。 - AfromanJ

感谢你的帮助，杰米。但是，丹科说得对。这个文本将由使用内容管理系统的人创建，我不能指望他们把span放在正确的位置上... - bravokiloecho