Fatal编程技术网
  • javascript/
  • Javascript 截断<；a>；标记文本

Javascript 截断<；a>；标记文本

javascript html

Javascript 截断<；a>；标记文本,javascript,html,Javascript,Html,在下面的代码中，我试图截断 但返回error未捕获引用error:truncate未定义 如何从标记中调用此函数？为什么 出现错误的原因是您的计算机尚未运行定义了truncate的代码。该函数在页面完成加载（包括JavaScript）之前运行。将代码放在窗口中。为安全起见，请使用setTimeout进行onload window.onload = function(){setTimeout(function () { truncate("truncate this text"); },1

在下面的代码中，我试图截断

但返回
error未捕获引用error:truncate未定义

如何从
标记中调用此函数？
为什么
出现错误的原因是您的计算机尚未运行定义了
truncate
的代码。该函数在页面完成加载（包括JavaScript）之前运行。将代码放在
窗口中。为安全起见，请使用
setTimeout
进行onload


window.onload = function(){setTimeout(function () {
    truncate("truncate this text");
},1);};


怎么
而且，与PHP等语言不同<代码>返回
不会放置任何文本。做一些类似于：

<a id="result-location" href='test'>
        <script>
        window.onload = function(){setTimeout(function () {

            document.getElementById('result-location').innerHTML = truncate("truncate this text");

        },1);};
        </script>
</a>
这将导致文本在50px后截断

.truncate{
宽度：50px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
显示：内联块；
}
此文本被截断
您不能像这样调用javascript代码。虽然您可以使用将javascript函数的结果打印到HTML元素中，但强烈建议您避免这种情况，因为这会使代码非常混乱

相反，请尝试以下操作：使用CSS选择器选择有问题的HTML元素，选择相应的HTML元素，最后修改其内部内容

函数截断（选择器）{
var obj=document.querySelector（选择器），
string=obj.innerHTML；
如果（string.length>5）string=string.substring（0,5）+'…'；
obj.innerHTML=字符串；
};
截断（“#链接”）

您必须使用ID对元素进行寻址，如下所示：


<a href='test' id="test-id">truncate this text</a>

<script>
function truncate(id){
    var string = document.getElementById(id).innerHTML;
    if (string.length > 5) {
        document.getElementById(id).innerHTML = string.substring(0,5)+'...';
    }
};

truncate("test-id");
</script>




函数截断（id）{
var string=document.getElementById（id）.innerHTML；
如果（字符串长度>5）{
document.getElementById（id）.innerHTML=string.substring（0,5）+'…'；
}
};
截断（“测试id”）；



JSFIDLE Demo:
所有javascript，包括函数定义，都应该发生在
中块。而
script
块应该留在页面的末尾，在那里函数“选择”带有id或类的
a
标记

然而，我认为您可能希望使用纯
CSS
实现相同的结果


<a class="trim-text">This text should be trimmed!</a>

// add this to your css file / block
.trim-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1 {
  max-width: 100px;
}



应该修剪此文本！
//将其添加到css文件/块中
.修剪文本{
显示：内联块；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
h1{
最大宽度：100px；
}

只需在调用函数之前在代码中定义函数，然后使用
文档。write
接收函数的输出


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    function truncate(string){
       if (string.length > 5)
          return string.substring(0,5)+'...';
       else
          return string;
    };

  </script>
</head>
<body>
  hhhhhhh<br />
<a href='test'>
    <script>
    document.write(truncate("truncate this text"));
    </script>
    </a>

</body>
</html>




JS-Bin
函数截断（字符串）{
如果（字符串长度>5）
返回字符串.substring（0,5）+'…'；
其他的
返回字符串；
};
hhhhh




签出此
如果您对仅css方法开放，那么有一种方法可以做到这一点。它基于宽度，而不是字符数，因此样式更精确

拨弄



html

更透彻的解释




还有一些选项可以不使用省略号而直接结束。
您必须在
文档中接收输出。写入
检查答案。
文档。写入
实际上不应该被使用。如果OP的代码没有
文档，他就无法打印出他的函数输出，这会助长糟糕的做法。其次，
document.write
中的错误做法是什么？我认为这是人们可能知道的关于DOM的第一件事之一。我试图否决投票，仅仅是因为你建议使用
document.write
。有很多，不应该用。教初学者养成坏习惯从来都不是一个好主意，他们可能会在不知不觉中养成坏习惯。此外，他的问题源于
窗口。onload
和
文档。write
只有在我提供的演示之前才真正起作用，没有显示的签名答案中的任何要点。简单地说，它可以工作，这是与OP代码更接近的解决方案。

<a href='test' id="test-id">truncate this text</a>

<script>
function truncate(id){
    var string = document.getElementById(id).innerHTML;
    if (string.length > 5) {
        document.getElementById(id).innerHTML = string.substring(0,5)+'...';
    }
};

truncate("test-id");
</script>



<a class="trim-text">This text should be trimmed!</a>

// add this to your css file / block
.trim-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1 {
  max-width: 100px;
}



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    function truncate(string){
       if (string.length > 5)
          return string.substring(0,5)+'...';
       else
          return string;
    };

  </script>
</head>
<body>
  hhhhhhh<br />
<a href='test'>
    <script>
    document.write(truncate("truncate this text"));
    </script>
    </a>

</body>
</html>



<a class="truncated-anchors">This be way too long</a>
<a class="truncated-anchors">This too is too long</a>
<a class="truncated-anchors">This as well, far too long</a>
<a class="truncated-anchors">This one is even longer if I add some more words</a>



.truncated-anchors {
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}