html - 强制背景绘制到行尾

Question

我有一个自定义标签 ab 定义如下 http://jsfiddle.net/JcLx4/2/我想让文本后面的黑线画到线的末尾。我将如何实现这一点？

Answer 1

添加ab { display: block; }到 CSS。演示:http://jsfiddle.net/JcLx4/6/

默认情况下，未知元素是内联的 ( display: inline )。

如果您希望样式在 Internet Explorer 8 和更早版本中工作，您需要使用一些 JavaScript。 Karl Nicoll 的回答描述了一种适用于屏幕媒体的解决方案，但它仍然无法启用打印媒体的样式。如果那是你想要的，你可以使用这个修改版本的 IE Print Protector:

/*! iepp v1.6.2 MIT @jon_neal */
(function(k,o){var a='ab',f=a.split('|'),d=f.length,b=new RegExp('(^|\\s)('+a+')','gi'),h=new RegExp('<(/*)('+a+')','gi'),m=new RegExp('(^|[^\\n]*?\\s)('+a+')([^\\n]*)({[\\n\\w\\W]*?})','gi'),p=o.createDocumentFragment(),i=o.documentElement,n=i.firstChild,c=o.createElement('body'),g=o.createElement('style'),j;function e(r){var q=-1;while(++q<d){r.createElement(f[q])}}function l(u,s){var r=-1,q=u.length,v,t=[];while(++r<q){v=u[r];if((s=v.media||s)!='screen'){t.push(l(v.imports,s),v.cssText)}}return t.join('')}e(o);e(p);n.insertBefore(g,n.firstChild);g.media='print';k.attachEvent('onbeforeprint',function(){var r=-1,u=l(o.styleSheets,'all'),t=[],w;j=j||o.body;while((w=m.exec(u))!=null){t.push((w[1]+w[2]+w[3]).replace(b,'$1.iepp-$2')+w[4])}g.styleSheet.cssText=t.join('\n');while(++r<d){var s=o.getElementsByTagName(f[r]),v=s.length,q=-1;while(++q<v){if(s[q].className.indexOf('iepp-')<0){s[q].className+=' iepp-'+f[r]}}}p.appendChild(j);i.appendChild(c);c.className=j.className;c.innerHTML=j.innerHTML.replace(h,'<$1font')});k.attachEvent('onafterprint',function(){c.innerHTML='';i.removeChild(c);i.appendChild(j);g.styleSheet.cssText=''})})(this,document)

看哪里写着var a='ab' ？您可以在那里添加其他元素，使用 |作为分隔符，例如var a='ab|foo|bar'将启用 <ab> , <foo>和 <bar>造型。