居中h1文本的元素落在多行上，换行符使文本看起来像这样：
This is a header that takes up two
lines
This is a header that takes up three
lines because it is really, really
long
有没有办法操纵这些元素，使文本行的长度大致相等？像这样：
This is a header that
takes up two lines
This is a header that takes
up three lines because it
is really, really long
jQuery 插件寡妇修复 http://matthewlein.com/widowfix/index.html防止单字行，但我正在寻找一些可以平衡的东西all多行元素中的行。有没有相关的 jQuery 插件，或者你能推荐一个策略吗？
我会只使用严格的 JavaScript 来解决这个问题，如下所示：
1. 将一个名为“truncate”的类放入您想要中断的 h1 标签中
2. 根据您的需要配置 javascript 代码
MAXCOUNT：（整数）每行计数的最大字符数
COUNT_SPACES：（布尔值）必须计算空格吗？
COUNT_PUNCTUATION：（布尔）标点符号必须计数吗？
EXACT：（布尔值）最后一个单词必须被删除吗？
BLOCKS_CLASS：（字符串）要考虑的 h1 的类名
我写代码的速度非常快，因此必须更好地测试错误，
但我认为这可以作为一个起点。
我在这段代码中没有使用 jQuery 是为了保持代码简洁并避免依赖性。
我想我正在使用所有跨浏览器命令（无法测试它，我现在只有linux）。然而，对跨浏览器兼容性任务的任何修正（包括如果需要的话使用 jQUery）可能很容易。
这是代码：
<html>
<head>
<style>
h1 {background-color: yellow;}
#hiddenDiv {background-color: yellow; display: table-cell; visibility:hidden;}
</style>
<script>
var MAXCOUNT = 20;
var COUNT_SPACES = false;
var EXACT = false;
var COUNT_PUNCTUATION = true;
var BLOCKS_CLASS = 'truncate';
window.onload = function ()
{
var hidden = document.getElementById('hiddenDiv');
if (hidden == null)
{
hidden = document.createElement('div');
hidden.id = 'hiddenDiv';
document.body.appendChild(hidden);
}
var blocks = document.getElementsByClassName(BLOCKS_CLASS);
for (var i=0; i<blocks.length; i++)
{
var block = blocks[i];
var text = block.innerHTML;
var truncate = '';
var html_tag = false;
var special_char = false;
maxcount = MAXCOUNT;
for (var x=0; x<maxcount; x++)
{
var previous_char = (x>0) ? text.charAt(x-1) : '';
var current_char = text.charAt(x);
// Closing HTML tags
if (current_char == '>' && html_tag)
{
html_tag = false;
maxcount++;
continue;
}
// Closing special chars
if (current_char == ';' && special_char)
{
special_char = false;
maxcount++;
continue;
}
// Jumping HTML tags
if (html_tag)
{
maxcount++;
continue;
}
// Jumping special chars
if (special_char)
{
maxcount++;
continue;
}
// Checking for HTML tags
if (current_char == '<')
{
var next = text.substring(x,text.indexOf('>')+1);
var regex = /(^<\w+[^>]*>$)/gi;
var matches = regex.exec(next);
if (matches[0])
{
html_tag = true;
maxcount++;
continue;
}
}
// Checking for special chars
if (current_char == '&')
{
var next = text.substring(x,text.indexOf(';')+1);
var regex = /(^&#{0,1}[0-9a-z]+;$)/gi;
var matches = regex.exec(next);
if (matches[0])
{
special_char = true;
maxcount++;
continue;
}
}
// Shrink multiple white spaces into a single white space
if (current_char == ' ' && previous_char == ' ')
{
maxcount++;
continue;
}
// Jump new lines
if (current_char.match(/\n/))
{
maxcount++;
continue;
}
if (current_char == ' ')
{
// End of the last word
if (x == maxcount-1 && !EXACT) { break; }
// Must I count white spaces?
if ( !COUNT_SPACES ) { maxcount++; }
}
// Must I count punctuation?
if (current_char.match(/\W/) && current_char != ' ' && !COUNT_PUNCTUATION)
{
maxcount++;
}
// Adding this char
truncate += current_char;
// Must I cut exactly?
if (!EXACT && x == maxcount-1) { maxcount++; }
}
hidden.innerHTML = '<h1><nobr>'+truncate+'</nobr></h1>';
block.style.width = hidden.offsetWidth+"px";
}
}
</script>
</head>
<body>
<center>
<h1 class="truncate">
This is a header that
takes up two lines
</h1>
<br>
<h1 class="truncate">
This is a header that takes
up three lines because it
is really, really long
</h1>
<br>
<h1>
This is a header pretty short
or pretty long ... still undecided
which in any case is not truncated!
</h1>
</center>
</body>
</html>
这是一个演示：http://jsfiddle.net/6rtdF/ http://jsfiddle.net/6rtdF/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
