【玩玩前端】Solr索引名过长，建议缩略显示

待我称王封你为后i 2022-03-14 12:46 143阅读 0赞

## Solr索引名过长，建议显示缩略和title全名 ##

1.  直接在Web页面调整DOM标签text的样式，使得自动缩略 -> 页面上直接调整是可见的
2.  js中通过append(‘text’)不会自动缩略 -> svg标签需要添加foreignObject包装一层，但是元素突然不显示了
3.  发现用到了d3.js类库，d3还要求html标记以xhtml作为前缀 -> 正常显示缩略和title全名

node.append('foreignObject')
        .attr('width', '180')
        .attr('height', '19')
        .append('xhtml:text')
        .attr('dx', function (d) {
            return 0 === d.depth ? -8 : 8;
        })
        .attr('dy', function (d) {
            return 5;
        })
        .attr('text-anchor', function (d) {
            return 0 === d.depth ? 'end' : 'start';
        })
        .attr('title', helper_node_text)
        .attr('style', 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 180px; padding-left: 5px;')
        .text(helper_node_text);

## 效果展示 ##

1.  创建一个索引长度较长的索引，例如名称为：  
    11test\_collection\_imp4sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
2.  Solr Web UI中的Cloud -> Graph看板，索引名称长度过长会进行缩略，鼠标移上去时会显示索引全名。  
    ![Solr Web UI中的Cloud -> Graph看板][Solr Web UI_Cloud -_ Graph]
3.  Solr Web UI中的Collections菜单，点击索引名称过长的索引，查看其详细信息展示。索引名称长度过长会进行缩略，鼠标移上去时会显示索引全名。  
    ![Solr Web UI中的Collections菜单][Solr Web UI_Collections]

## Reference ##

[SVG 简介与截图等应用][SVG]  
[https://www.jianshu.com/p/65eb7dbdfdf1][https_www.jianshu.com_p_65eb7dbdfdf1]  
[https://www.jianshu.com/p/263fce04422c][https_www.jianshu.com_p_263fce04422c]  
[https://blog.csdn.net/Mosicol/article/details/80105686][https_blog.csdn.net_Mosicol_article_details_80105686]  
[https://codeday.me/bug/20180506/162118.html][https_codeday.me_bug_20180506_162118.html]  
[https://cloud.tencent.com/developer/ask/133148][https_cloud.tencent.com_developer_ask_133148]  
[https://ask.helplib.com/html/post\_7009784][https_ask.helplib.com_html_post_7009784]

[Solr Web UI_Cloud -_ Graph]: /images/20220313/eeb1acc834fb483f8730319a2db30e9f.png
[Solr Web UI_Collections]: /images/20220313/8e7629b2bb1444469c21160226ad31b7.png
[SVG]: https://www.zhangxinxu.com/wordpress/2017/08/svg-foreignobject/
[https_www.jianshu.com_p_65eb7dbdfdf1]: https://www.jianshu.com/p/65eb7dbdfdf1
[https_www.jianshu.com_p_263fce04422c]: https://www.jianshu.com/p/263fce04422c
[https_blog.csdn.net_Mosicol_article_details_80105686]: https://blog.csdn.net/Mosicol/article/details/80105686
[https_codeday.me_bug_20180506_162118.html]: https://codeday.me/bug/20180506/162118.html
[https_cloud.tencent.com_developer_ask_133148]: https://cloud.tencent.com/developer/ask/133148
[https_ask.helplib.com_html_post_7009784]: https://ask.helplib.com/html/post_7009784