我需要 JavaScript 来检测每个浏览器包装的文本行,并将其包装成 <span class="line">
。
我看到过一些文章谈论测量每个单词的 y 轴,但没有看到一个可靠的解决方案。
这是我目前的代码。您可以在 Jsfiddle 上查看。
HTML:
<div class="inline-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus condimentum metus, et placerat augue rutrum vitae. Donec arcu lorem, eleifend at elementum eget, consectetur vel lacus. Nam euismod iaculis varius. Phasellus sed dui diam. Nullam facilisis, diam sit amet sagittis cursus, metus tortor gravida erat, ut fringilla risus ipsum eu nisl.</div>
JS/jQuery
(function($){
$.fn.inlinebackground = function() {
$.each(this, function(i,t) {
var split = $(t).html().split(' ');
var output = '';
$.each(split, function(i,o){
output += '<span class="line">'+o+'</span>';
if (i < (split.length - 1)) {
output += '<br>';
}
});
$(t).html(output);
});
}
})(jQuery);
/* End Plugin Code */
// Run the plugin on .news-caption
$(function(){
$('.inline-bg').inlinebackground();
});
CSS
.inline-bg { width: 200px; line-height:3em; }
.inline-bg span.line { background-color: black; color: white; padding: 15px; }