Я не могу обернуть текст в промежутки, потому что это ссылка. Я пытался создать разные промежутки и поместить их в качестве фона, но я не могу получить их с таким же размером, как у приведенного выше текста.
т что-то вроде-moz-background-inline-policy
существуют в Webkit? Это свойство в основном дает вам возможность указать, как должен отображаться фон для каждой строки встроенного элемента. Я прикрепляю к изображениям одного и того же элемента в разных браузерах.
Это результат на Firefox (с-moz-background-inline-policy: each-box;
)
Это на Google Chrome (я пробовал-webkit-background-inline-policy
, но, похоже, его не существует)
Поскольку в Webkit отсутствует свойство фоновой политики, я пытаюсь найти другое решение с использованием jQuery. Я добавляю дополнительный интервал за каждой строкой текста. Это нормально, за исключением того факта, что текст не измеряется должным образом. Вы можете увидеть оба примера в действии здесь:
Оригинальное решение (фоновая встроенная политика):http://jsfiddle.net/notme/mCnGy/5/Новое решение (jQuery spans):http://jsfiddle.net/notme/my3br/1/РЕШЕНИЕ//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
var dummy = this.clone().css({
top: -9999,
left: -9999,
position: 'absolute',
width: this.width()
}).appendTo(this.parent()),
text = dummy.text().match(/\S+\s+/g);
var words = text.length,
lastTopOffset = 0,
lines = [],
lineText = '';
for (var i = 0; i < words; ++i) {
dummy.html(
text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));
var topOffset = jQuery('span', dummy).offset().top;
if (topOffset !== lastTopOffset && i != 0) {
lines.push(lineText);
lineText = text[i];
} else {
lineText += text[i];
}
lastTopOffset = topOffset;
}
lines.push(lineText);
this.html(openTag + lines.join(closeTag + openTag) + closeTag);
dummy.remove();
};
//thanks @thirtydot
var fixIt = function() {
//remove previous .dummy
$('.dummy').remove();
$('div.node-title-text').each(function(index) {
var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
console.log(dummy);
$(dummy).wrapLines('<span><span>', '</span></span>');
var padding = 15;
dummy.css({
left: -padding,
right: -padding
}).find(' > span').css('padding-left', padding*2);
});
};
$(window).load(function(){
$(window).resize(fixIt).resize(); //trigger resize event onLoad
});