Fatal编程技术网
  • javascript/
  • Javascript 缩短响应表中单词的最佳方法

Javascript 缩短响应表中单词的最佳方法

javascript html css

Javascript 缩短响应表中单词的最佳方法,javascript,html,css,Javascript,Html,Css,在构建包含大量数据的界面时，有一些元素需要响应。当然，可以用任何其他类型的元素替换 表的结构始终相同： 所有列都非常小，可以有固定的宽度 除了一列之外，它有时包含需要缩短的单词 问题： 有些行有一个长而单一的单词，比如“意向性惊奇Toostrongawewesomeness”，它不会断行，而是伸展整张桌子。这在智能手机上并不好。我确实创建了一个片段来说明这个问题 正文{ 字体系列：“Helvetica Neue”，Helvetica，无衬线； } #包装纸{ 背景：#eaeaea； 宽度：

在构建包含大量数据的界面时，有一些
元素需要响应。当然，可以用任何其他类型的元素替换

表的结构始终相同：

  • 所有列都非常小，可以有固定的宽度
  • 除了一列之外，它有时包含需要缩短的单词
问题：

有些行有一个长而单一的单词，比如“意向性惊奇Toostrongawewesomeness”，它不会断行，而是伸展整张桌子。这在智能手机上并不好。我确实创建了一个片段来说明这个问题

正文{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
}
#包装纸{
背景：#eaeaea；
宽度：320px；
保证金：0自动；
}
#包装表{
宽度：100%；
垂直对齐：中间对齐；
}
#包装器图标{
背景：#8da2b5；
边界半径：3px；
显示：块；
高度：23px；
宽度：23px；
}
运输署{
边框底部：1px实心#d3d6db；
}
运输署：第n名儿童（1）{
填充：10px；
}
/*演示样式*/
身体{
背景：#e4e8eb；
}
#包装纸{
边框：1px实心#d3d6db；
背景#f0f4f7；
颜色：#63778b；
}
#传奇{
颜色：#63778b；
宽度：320px；
利润率：40px自动10px；
字体大小：11px；
文本转换：大写；
}
|------这是所需的最小宽度----------|
洛雷姆·伊普苏姆·多洛。
123
我是你的麻烦制造者，让你舒展筋骨ASDASDAD
42
圣徒、伊塔克、丘比特、奥雷姆-伊普苏姆-多洛尔。。
16
维利特，劳丹蒂姆？
24
建筑师，多洛雷姆，嗯！
13
多洛尔，内克·莫莱斯蒂亚斯。
24
配给权，谴责权，应得权。
52
Quidem，在，除了Uri？
41
开胃酒，开胃酒。
75
请解释一下，伊尔姆。
45
小脸，老天爷，借记！
24
腐败，腐败！
25
Expedita，ea，ab。
41
必要的，需要的，需要的。
24
快，快！
35
波罗，乌兰，埃西。
14
伊文尼特，拉博洛桑，在。
64
Est，nisi，dicta！
74
是的，是的，是的！
24
莫莉塔，德莱克特斯，麦格纳姆！
52
您可以使用
文本溢出：省略号可能与
空白：nowrap结合使用根据上下文而定，它应该能很好地为您实现这一点
您可以这样做：


td {
  border-bottom: 1px solid #d3d6db;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  
}


更新的代码段：




但是请注意，它应该有一个预定义的宽度。
或者当大于初始宽度时，您可以让它显示在多行上，如下所示：


span.text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}



对于JavaScript解决方案，您可以使用
RegExp
replace
。您可以根据设备大小更改字符限制：



$（truncatext）；
函数truncateText（）{
var maxlength=200；
var screenWidth=window.innerWidth；
如果（屏幕宽度<700）{
maxlength=23；
}
var regExp=new regExp（'（[^\\s]{'+maxlength+'}）（[^\\s]+'），'gi'）；
$（'#wrapper table.text'）。每个（函数（i，el）{
变量$el=$（el）；
var html=$el.data（'full'）；
如果（！html）{
$el.data（'full'，$el.html（））；
html=$el.html（）；
}
$el.html（html.replace（regExp，$1…）；
});
}
window.onresize=truncateText

正文{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
}
#包装纸{
背景：#eaeaea；
宽度：320px；
保证金：0自动；
}
#包装表{
宽度：100%；
垂直对齐：中间对齐；
}
#包装器图标{
背景：#8da2b5；
边界半径：3px；
显示：块；
高度：23px；
宽度：23px；
}
运输署{
边框底部：1px实心#d3d6db；
}
运输署：第n名儿童（1）{
填充：10px；
}
/*演示样式*/
身体{
背景：#e4e8eb；
}
#包装纸{
边框：1px实心#d3d6db；
背景#f0f4f7；
颜色：#63778b；
}
#传奇{
颜色：#63778b；
宽度：320px；
利润率：40px自动10px；
字体大小：11px；
文本转换：大写；
}



|---------这是所需的最小宽度----------|
洛雷姆·伊普苏姆·多洛。
123
我是你的麻烦制造者，让你舒展筋骨ASDASDAD
42
圣徒、伊塔克、丘比特、奥雷姆-伊普苏姆-多洛尔。。
16

如果单列可调，flexbox模型可以工作，如中所示（您可以修改右侧面板宽度以测试行为）。该代码改编自。如你的问题所述：


    

  • 网格尽可能宽，以填充容器宽度
    • 

  • 文本列宽可调；其他列宽是固定的
    • 

  • 文本在必要时被截断以避免换行
    • 

  • 不涉及Javascript或jQuery代码，只涉及HTML和CSS
    • 




HTML标记如下所示：


<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div">Lorem ipsum dolor</div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">24</div>
</div>
<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div"><strong>I_am_the_long_trouble_maker_that_stretches</strong></div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">8</div>
</div>
...



我认为最好缩短单词，通过Javascript添加多读和少读。代码如下：


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p class="more" style="text-align: justify; margin: 5px; padding: 0px; font-size: 15px; line-height: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <script type="text/javascript">
        $(document).ready(function() {
        // Configure/customize these variables.
        var showChar = 500 // How many characters are shown by default
        var ellipsestext = "...";
        var moretext = "Read More ";
        var lesstext = "Read Less";


        $('.more').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);

                var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
    </script>
</body>
</html>





Lorem ipsum door sit amet，concetetetur adipising elit，sed do eiusmod temporal incidedut laboure and dolore magna aliqua。但是，在最低限度的情况下，我们需要一个专门的实验室来进行实践。两人或两人在一起

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p class="more" style="text-align: justify; margin: 5px; padding: 0px; font-size: 15px; line-height: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <script type="text/javascript">
        $(document).ready(function() {
        // Configure/customize these variables.
        var showChar = 500 // How many characters are shown by default
        var ellipsestext = "...";
        var moretext = "Read More ";
        var lesstext = "Read Less";


        $('.more').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);

                var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
    </script>
</body>
</html>