gsky916
小狐狸
小狐狸
  • UID28698
  • 注册日期2009-04-25
  • 最后登录2017-06-24
  • 发帖数94
  • 经验22枚
  • 威望0点
  • 贡献值0点
  • 好评度2点
  • 社区居民
阅读:1838回复:4

向诸位大人求教!关于火狐折行的一个问题。

楼主#
更多 发布于:2010-01-11 23:27
今天在查询一个网页的时候再次出现了这个问题:
http://ed2k.shortypower.org/?hash=83567 ... ed1a96aa24

之前查阅过一些资料,传说这个是FF的万年BUG。

单凭CSS不能解决这个问题,只能使用脚本才有希望。之后四处寻访,在userscript上找到几个发现都不是很有效。不知道诸位大人能否推荐一个?先拜谢过!

另外想起sunwan大大之前的BTchina脚本里面有相关的折行办法,似乎是查找特定字符插入空格。代码如下。不知道是否能够移植用于上面的那个链接页面。

pageChecker.prototype.insertSpace = function insertSpace(str) {
    var lablePos = [];   // 标签位置
    var lableValue = []; // 标签值
    var s = "";          // 去除了标签的字串
    var s1 = "";         // 添加了空格后的字串
    var s2 = "";         // 恢复了标签的字串
    var index;
    while ( str ) {
        index = str.search(/(<[^<>]*>)/); // 查找标签位置
        if ( index != -1 ) {              // 找到
            lableValue.push(RegExp.$1);   // 保存标签值
            s += str.substring(0,index);  // 保存去除了标签的字串
            lablePos.push(s.length);      // 保存标签位置
            str = str.substring( index + (RegExp.$1).length, str.length ); // 截断已查找部分
        }
        else {
            s += str;                     // 保存字串
            str = '';
        }
        s1 = insertSpace1(s,s1,lablePos); // 适当位置插入空格
    }

    // 恢复标签
    for ( var i = 0, j = 0; i < lablePos.length; i++ ) {
        s2 += s1.substring( j, lablePos[i] ) + lableValue[i];
        j = lablePos[i];
    }
    s2 += s1.substring( j, s1.length );
    return s2;

    function insertSpace1(s,s1,pos) {
        // 允许的最长连续ASCII字符,达到此长度则强行分割
        var maxAsciiLength = 30;
        // 匹配规定字符数以上的可见ASCII字符
        var re = eval( '/([\x21-\x7e]{' + maxAsciiLength + ',})/' );
        // 查找匹配字符串位置
        var j = s.search(re);
        // 没找到取整串,找到取前面的子串
        s1 = ( j == -1 ) ? s : s.substring( 0, j );
        while ( -1 != j ) {
            s = s.substring( j + (RegExp.$1).length, s.length ); // 保存剩余的子串
            // 往匹配字符串的') ] } . - _'后面插入空格并分组
            var ss = (RegExp.$1).replace(/((?:[\)|\]|\}|\.|\-|_])+)/g,'$1 ').split(' ');

            for ( var i = 0; i < ss.length; i++ ) {
                if ( ss[i] && ss[i].length > maxAsciiLength ) {
                    while ( ss[i] && ss[i].length > maxAsciiLength ) {
                        // 分组后的子串长度大于最长连续字符数,在最长连续字符数后插入连线符及空格
                        s1 += ss[i].substring(0,maxAsciiLength) + '_ ';
                        fixPos(s1.length-2, 2, pos);        // 调整标签位置
                        ss[i] = ss[i].substring(maxAsciiLength,ss[i].length);
                    }
                    s1 += ss[i];
                }
                else {
                    if ( i == ss.length - 1 ) {
                        // 是最后分组则连接以待处理
                        s1 += ss[i];
                    }
                    else {
                        // 非最后分组则连接并插入空格
                        s1 += ss[i] + ' ';
                        fixPos(s1.length-1, 1, pos); // 调整标签位置
                    }
                }
            }
            j = s.search(re);        // 循环处理匹配字符串后面的子串
            s1 += ( j == -1 ) ? s : s.substring( 0, j );
        }
        return s1;
    }
ferret
千年狐狸
千年狐狸
  • UID21816
  • 注册日期2007-11-11
  • 最后登录2013-03-22
  • 发帖数1114
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
1楼#
发布于:2010-01-11 23:27
lz提供的网址在哪里需要折行?表格是没法折行的吧。

另外这个脚本是无视屏幕宽度强行折行的,在不同的网站针对不同的屏幕宽度可能要设置不同值。
gsky916
小狐狸
小狐狸
  • UID28698
  • 注册日期2009-04-25
  • 最后登录2017-06-24
  • 发帖数94
  • 经验22枚
  • 威望0点
  • 贡献值0点
  • 好评度2点
  • 社区居民
2楼#
发布于:2010-01-11 23:27
主要是文件名那一栏。太长的话,就把表格撑开了,超出页面宽度(当然这个也取决于屏幕宽度)

希望是能实现下图这样的折行效果。


本来理想的情况是给中间那个table设置最大宽度,再使用脚本令其在所设置宽度的限制下进行折行,不知道是否有可能。
harnack
狐狸大王
狐狸大王
  • UID25613
  • 注册日期2008-07-27
  • 最后登录2020-01-08
  • 发帖数325
  • 经验19枚
  • 威望0点
  • 贡献值0点
  • 好评度1点
  • 社区居民
3楼#
发布于:2010-01-11 23:27
单凭CSS不能解决这个问题

css没准也能奏效:
@-moz-document domain("ed2k.shortypower.org") {
table th,tr.a td:nth-of-type(2),tr.b td:nth-of-type(2)
{white-space: normal !important;}
tr.a td:nth-of-type(2),tr.b td:nth-of-type(2),tr.a+tr th:nth-of-type(2),tr.b+tr th:nth-of-type(2)
{text-align: justify !important;}
}
听老人说,今生做千件好事,来世方能讨生为猫。
gsky916
小狐狸
小狐狸
  • UID28698
  • 注册日期2009-04-25
  • 最后登录2017-06-24
  • 发帖数94
  • 经验22枚
  • 威望0点
  • 贡献值0点
  • 好评度2点
  • 社区居民
4楼#
发布于:2010-01-11 23:27
厉害!harnack大大果然出手不凡~

之前试过{white-space: normal !important;}不过只能令第一列换行。

貌似是FF3.5新支持的属性?还不知道具体的用法。

 如此网上流传的CSS不可解决此问题的传言看来要终结了。
游客

返回顶部