All geek questions in one place

Text trimming <a> tag

In the code below, I am trying to truncate the tag text <a>:

<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/

But returns error Uncaught ReferenceError: truncate is not defined

How can this function be called from a tag <a>?

+4
source share
6 answers

Why

The reason you get the error message is because your computer has not yet run the code that it detected truncate. This function is executed until the page has finished loading, including JavaScript. Put the code in window.onloadwith setTimeoutto be safe.

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

how

Also, unlike languages ​​like PHP. returnwill not put text. Do something like:

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

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

        },1);};
        </script>
</a>

Fiddle

<h / ">

JSFiddle

window.onload. JSFiddle, no no wrap

Choose no-wrap

CSS

CSS

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

50px;

.truncate {
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
<a class="truncate">This text is truncated</a>
+3

javascript-, . document.write, javascript HTML, , .

- : HTML CSS, HTML , , .

function truncate(selector) {
    
    var obj = document.querySelector(selector),
        string = obj.innerHTML;
    
    if (string.length > 5) string = string.substring(0, 5) + '...';
    
    obj.innerHTML = string;
};

truncate('#link');
<a href="test" id="link">truncate this text</a>
0

, :

<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/

0

javascript, , <script> ... </script>. script , "" 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;
}
0

, document.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>

DEMO

0

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

And there are options to not use the ellipsis and just finish it immediately.

0
source

Source: https://habr.com/ru/post/1584669/

More articles:


All Articles