有什么办法可以强制使用CSS进行字处理吗?
这个意思是说,使用非等宽字体,你可以强制浏览器以固定的宽度渲染每个字符吗?
解决方法
你不能用CSS这样做。即使可以,结果会显得可怕:
如果您真的需要这样做,您可以使用JavaScript将每个单独的角色包含在元素中(或者只是手工执行):
function wrap_letters($element) { for (var i = 0; i < $element.childNodes.length; i++) { var $child = $element.childNodes[i]; if ($child.nodeType === Node.TEXT_NODE) { var $wrapper = document.createDocumentFragment(); for (var i = 0; i < $child.nodeValue.length; i++) { var $char = document.createElement('span'); $char.className = 'char'; $char.textContent = $child.nodeValue.charAt(i); $wrapper.appendChild($char); } $element.replaceChild($wrapper,$child); } else if ($child.nodeType === Node.ELEMENT_NODE) { wrap_letters($child); } } } wrap_letters(document.querySelector('#monospace'));
.char { display: inline-block; width: 15px; text-align: center; }
<h2>This is a title</h2> <h2 id="monospace">This is a title</h2>