时间戳

首页 > 解决方案 > How to show horizontal ellipsis at bottom of the text

html - How to show horizontal ellipsis at bottom of the text

问题描述

I'm using a HTML Entity to show three dots (...) to indicate uses that there was having more text. There were other ways to show this through CSS (text-overflow: ellipsis;), but I have some limitations to use CSS style.

The issue is, the ellipsis is showing in the middle of the text - I need it the same as how manual three dots appear after a text like,

Many people have sent language examples over the years...

My current output:

enter image description here

horizontal ellipsis

<p><span>Sample Text:</span>Many people have sent language examples over the years, but we want more! We'd love to add more examples&#8230;</p>

标签： htmlcss

解决方案

ToolJS是一个实用的 JavaScript 库，其功能可以解决此类问题并简化您的工作流程。

它包含一个操作字符串的“Str”模块，其中包括.truncate函数，它可以满足您的需求。

如何使用它

通过其CDN或NPM获取代码并使用如下所示

var Str = ToolJS.export("Str");
    
    var myString = "Many people have sent language examples over the years, but we want more! We'd love to add more examples";
    
    var newString = Str.truncate(myString, {
        limit: 40, // this is the number of characters you want to show in your string
        replacement: "..." // this is the replacement string
    });
    
    // Or you could do a shorthand implentation using the same method
    
    var newString = Str.truncate(myString, 40, "...");
    
    // To show it on your DOM
    
    var DOM = ToolJS.export("DOM");
    
    DOM.html("p", `<p><span>Sample Text:</span>${newString}</p>`);
   
<script src="https://unpkg.com/@redeakaa/tooljs@1.0.1/dist/umd/tooljs.min.js"></script>
<p><span>Sample Text:</span>Many people have sent language examples over the years, but we want more! We'd love to add more examples</p>

推荐阅读