截断<a> tag text

Question

In below code I'm attempting to truncate the <a> tag text :

<a href='test'>
    <script>
        truncate("truncate this text");
    </script>
</a>

 

function truncate(string){
    if (string.length > 5)
        return string.substring(0,5)+'...';
    else
        return string;
};

https://jsfiddle.net/fcq6o4Lz/6/

但返回error Uncaught ReferenceError: truncate is not defined

如何在<a>标记内调用此函数？

Answer 1

为什么

您收到错误的原因是您的计算机尚未运行定义truncate的代码。该功能在页面加载之前运行，包括JavaScript。将代码放在带有window.onload的{​​{1}}中，以确保安全。

setTimeout

如何

此外，与PHP等语言不同。 window.onload = function(){setTimeout(function () { truncate("truncate this text"); },1);}; 不会放置任何文字。做类似的事情：

return

Fiddle

<小时/>

JSFiddle Fix

请记住将该功能保留在<a id="result-location" href='test'> <script> window.onload = function(){setTimeout(function () { document.getElementById('result-location').innerHTML = truncate("truncate this text"); },1);}; </script> </a> 之外。你可以在JSFiddle中通过设置no no-wrap

来改变它

CSS

您可以使用CSS截断文字

window.onload

这将导致文本在50px之后被截断;

.truncate {
    width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.truncate {
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

Answer 2

您不会像这样调用javascript代码。虽然您可以使用document.write将javascript函数的结果打印到HTML元素中，但强烈建议您避免这种情况，因为它会使代码真的混乱。

而是尝试这样的事情：用CSS选择器选择有问题的HTML元素，选择相应的HTML元素，最后修改其内部内容。

class MyClass:
    pass
myinstance = MyClass()  # if you want instance for example
setattr(myinstance, "randomname", "desiredvalue")
print myinstance.randomname  # wonderfull!

[self.collectionView reloadData]

Answer 3

您必须使用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>

JSFiddle-Demo：http://jsfiddle.net/c8s3dc6q/1/

Answer 4

所有javascript，包括函数定义，都应该在<script> ... </script>块中发生。并且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;
}

Answer 5

只需在代码中调用函数之前定义函数，然后使用tableView.getItems().get(0)接收函数的输出

tableView.getItems().get(0)

结帐DEMO

Answer 6

如果你只对css方法开放，那就有办法做到这一点。它基于宽度而非字符数，因此样式更精确。

拨弄

http://jsfiddle.net/Hastig/ufe1t66v/3/

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>

CSS

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

更彻底的解释

http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

并且可以选择不使用省略号并立即结束。