Css/js text overflow automatically add ellipses ellipsis

Source: Internet
Author: User
Tags strlen xmlns

CSS text overflow ellipsis

Text-overflow:ellipsis

Ext-overflow is a special attribute, which is defined by the previous document in the current document (which does not contain the Text-overflow attribute, fml!):

Name:text-overflow-mode
Value:clip | ellipsis | Ellipsis-word
Clip: Do not show ellipsis (...). ), but simply cut
Ellipsis: Displays an ellipsis (...) when text overflows inside an object. ), the position where the ellipsis is inserted is the last character.
Ellipsis-word: Displays an ellipsis (...) when text overflows inside an object. , omitting the mark insertion position is the last word (word).

Example

The code is as follows Copy Code

. ellipsis li{

-moz-binding:url (' ellipsis.xml#ellipsis ');/* relative to current HTML path * *

Overflow:hidden;

Text-overflow:ellipsis;

White-space:nowrap;

width:200px;

}

You may also have noticed that the key code-moz-binding:url (' Ellipsis.xml#ellipsis ') compatible with the Firefox browser; is to load an XML file.
Ellipsis.xml Code:

The code is as follows Copy Code

<?xml Version= "1.0" encoding= "Utf-8"

<bindings

 xmlns= "HTTP://WWW.MOZILLA.ORG/XBL"

 xmlns:xbl= "HTTP://WWW.MOZILLA.ORG/XBL"

 xmlns:xul= "http://www.mozilla.org/keymaster/ Gatekeeper/there.is.only.xul "

    <binding id=" ellipsis "

         <content>

             <xul:description crop= "End" xbl:inherits= "Value=xbl:text"

                 <children/>

             </xul:description>

         </content>

    </binding>

</bindings>

To ask me why, these are browser bugs and I don't want to delve into

Download this jquery plugin: jquery ellipsis plugin

Call Method:

The code is as follows Copy Code

$ (document). Ready (function () {
$ ('. Ellipsis '). ellipsis ();
}

Direct character interception in PHP

The code is as follows Copy Code

The public static function Chinesesubstr ($str, $start, $len) {//$str refers to a string, $start the starting position of the string, $len the length of the string
$strlen = $start + $len; Stores the total length of a string in $strlen, from the start of the string to the total length of the string
for ($i = $start; $i < $strlen;) {
if (Ord ($str, $i, 1)) > 0xa0) {//If the first byte of the string has an ASCII value greater than 0xa0, the character is represented
$tmpstr. = substr ($str, $i, 2); Every time you remove two-digit assignments to the variable $tmpstr, it equals a Chinese character.
$i = $i +2; Variable plus 2
} else{
$tmpstr. = substr ($str, $i, 1); If it is not Chinese characters, one character assignments to the variable each time $tmpstr
$i + +;
}
}
return $tmpstr; return string
}

How to use

Chinesesubstr ($str, 0, 10);

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.