How to use text-overflow:ellipsis in Firefox

text-overflow:How to use ellipsis in Firefox browser? I believe that many friends who are new to the front-end will have such questions. This chapter will introduce you to the usage of text-overflow:ellipsis in Firefox browser. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Using text-overflow:ellipsis to display ellipses in overflow text has two advantages. First, there is no need to limit the number of words through the program; second, it is beneficial to SEO. It is usually the article title list that needs to be used to display ellipses for overflow text. This process is more friendly to search engines, because the title is not actually truncated, but is limited to the width and is not displayed.

The usual approach is this:

1.overflow:hidden;

2.text-overflow:ellipsis;

3.-o- text-overflow:ellipsis;

4.white-space:nowrap;

5.width:100%;

Among them, overflow: hidden and white-space: nowrap All are necessary otherwise the ellipsis will not be displayed; -o-text-overflow: ellipsis is for Opera; and the width setting is mainly for IE6;

This method supports Internet Explorer, Safari, Chrome and Opera, but FF does not support it, but similar effects can be achieved through Jquery.

Download this Jquery plug-in: jQuery ellipsis plugin

   
$(document).ready(function() {
    $('.ellipsis').ellipsis();
}

The above is a complete introduction to the usage of text-overflow:ellipsis in Firefox browser, if you want to know more about HTML video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to use text-overflow:ellipsis in Firefox. For more information, please follow other related articles on the PHP Chinese website!