In today’s world, links and email addresses have become an integral part of our digital communication. We share links to important articles, websites, and social media posts, and we use email addresses to communicate with people from around the world. However, these links and email addresses can be quite long and may not fit within the available space on our screens. This is where truncating comes in handy.
Truncating is the process of shortening a long string of text by replacing part of it with ellipsis. In the context of links and email addresses, truncating can help make them more visually appealing and easier to read. In this blog post, we will discuss how to truncate long links and provide a simple JavaScript code to achieve this.
The first step in truncating a long link is to determine the maximum number of characters that will fit within the available space. This can be done by measuring the width of the parent container and converting it to em width of the link’s font size. This part can be a bit tricky and may require some manual adjustments. For instance, some fonts may not work well with this approach.
Once we have determined the maximum number of characters, we can trim the original link to that length and replace the rest of it with ellipsis. For example, the link “verylongaddress.quitelongsubdomain.annoyinglylongdomainname.co.uk” can be truncated to “verylon…name.co.uk.”
The following code provides a function to truncate long links to fit within a container without wrapping or overflowing. The function works by creating a copy of the original link text in the title attribute, then using JavaScript to calculate the number of characters that will fit within the container and truncating the link accordingly.
# # ***
# Subroutine: String truncate
# Truncates a string to the specified length and replaces the middle part with ellipses.
String::trunc = String::trunc or (n) ->
cut_pos = 0.5 # Adjust to cut the string in a different place
if @length > n
@substr(0, n * cut_pos - 3) + '…' + @substr(@length - n * (1 - cut_pos), Math.ceil(n * (1 - cut_pos)))
else
@
# Subroutine: Truncate url of an element to specified length (default 10 characters)
$.fn.html_truncate = (char_count = 10) ->
@.html @.attr('title').trunc(char_count)
# Subroutine: Convert pixels to em
# Target element and size in pixels
# WARNING: This is a simplified version - font size of the target element must be specified in px in the css!
px2em = ($el, px_size) ->
font_size = parseInt($el.css('font-size')) # This is 1em
Math.floor(px_size / font_size * 1.9)
# Main function
truncateLinks = ->
$elements = $('.str-truncate')
$elements.each ->
$parent = $(@).parent()
$link = $(@).attr('href') ? $(@).find('a') # Use cached variables
$link.attr('title', $link.html())
$link.html_truncate(px2em($parent, $parent.width()))
# Run the function on page load
$(document).ready ->
truncateLinks()
# Run the function on window resize
resize_timeout = undefined
$(window).resize ->
if resize_timeout
window.cancelAnimationFrame(resize_timeout) # Cancel the previous requestAnimationFrame
resize_timeout = window.requestAnimationFrame(truncateLinks) # Use requestAnimationFrame instead of setTimeout
In conclusion, truncating long links can help make them more visually appealing and easier to read. Although it may not be an ideal solution for all situations, it is better than having links wrap or overflow. With the JavaScript code provided in this blog post, you can easily truncate long links in your web application.
Add a comment