仅在包装文字的底部添加边框 [英] Add a border only to the bottom of wrapped text
问题描述
我正在尝试在一些包装的文本上添加下划线,使其适合文本底部行的宽度,而仅出现在该底部行的下方.图1展示了预期的效果
I'm trying to achieve an underline on some wrapped text that fits to the width of the bottom row of text whilst only appearing underneath that bottom line. Figure 1 illustrates the desired effect
图1
使用此HTML:
<h2><span class="inline-block">optatur, volendit inum simolor</span></h2>
并将span
设置为display:inline;
,我可以使下划线与文本的宽度完全匹配,但会在所有文本下划线.
and setting the span
to display:inline;
I can get the underline to fit perfectly with the width of the text but it underlines all of the text.
或,将span
设置为display:inline-block;
,我可以使下划线仅出现在底行下方,但随后会填满父级的整个宽度.
Or, setting the span
to display:inline-block;
I can get the underline to only appear under the bottom line but it then fills the whole width of the parent.
有关上述示例,请参见此JSfiddle: http://jsfiddle.net/PWDV7/1/
See this JSfiddle for the above examples: http://jsfiddle.net/PWDV7/1/
是否有任何方法可以达到图1的结果?
Is there any way to achieve the result of figure 1?
推荐答案
这个答案是有关查找换行符的问题,我设法提出了这个解决方案(总之,它涉及到使用JS查找换行符发生的位置,并在其上的所有文本周围包裹一个跨度最后一行):
With a good leg up from this answer to a questions about finding line wraps, I managed to come up with this solution (in short, it involves using JS to find where a line wrap has occurred and wraps a span around all the text that sits on the last line):
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/
You can see it working here: http://jsfiddle.net/PWDV7/5/
这篇关于仅在包装文字的底部添加边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!