Limit the number of output words, more than the use of ... Omitted

Source: Internet
Author: User

HTML code
    1. <div style="width:200px; White-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid Red "> try it and try it try try try try try it try </div>

Effect:



Grammar:

Text-overflow:clip | Ellipsis

Parameters:

Clip: Do not display the ellipsis tag (...). ), but a simple cut

(Clip This parameter is not used!) )

Ellipsis: Displays ellipsis (...) when text inside an object overflows. )

Description

Sets or retrieves whether an ellipsis tag (...) is used. ) indicates an overflow of text within the object.

Please note that the Text-overflow:ellipsis property is not effective in FF.

Example:

div {text-overflow:clip;}

Text-overflow is a very special style, we can use it instead of the title intercept function we usually use, and this is more friendly to search engines, such as: the title file has 50 characters, and our list may be only 300px width. If the title intercepts the function, then the title is not complete, if we use CSS style text-overflow:ellipsis, the output title is complete, but only by the size of the container is not displayed.

The Text-overflow property is only annotations, and whether the ellipsis is displayed when text overflows. No other style attribute definitions are available. We want the effect of an ellipsis to occur when the overflow is implemented. You must also define: Force text to appear on one line (white-space:nowrap) and overflow content to be hidden (Overflow:hidden). This is the only way to achieve an overflow text display ellipsis effect.

Sometimes a piece of text is too long, will affect the entire layout, many people use dynamic language to solve this problem, but must distinguish between Chinese and English, because the Chinese equivalent of two English characters length, so not only cumbersome, but also increased the burden of the server. In fact, we can use CSS perfectly to solve this problem,

HTML code
    1. White-space:nowrap;overflow:hidden;text-overflow:ellipsis; <!--on these three sentences,,, hehe ...->

or use

PHP chinese processing Chinese string intercept (MB_SUBSTR) and get Chinese string words

Font: [Increase decrease] Type: Reprint time: 2011-11-10 I want to comment

PHP Chinese processing Chinese string interception (MB_SUBSTR) and get Chinese character string words, the need for friends can refer to the next. first, Chinese interception: mb_substr ()

Mb_substr ($str, $start, $length, $encoding)

$str, the string that needs to be truncated
$start, starting at 0 at the beginning of the truncation
$length, the number of words to intercept
$encoding, page encoding, such as UTF-8,GB2312,GBK

Instance:
Copy CodeThe code is as follows:
<?php
$str = ' Script house: Http://www.jb51.net ';
Echo mb_substr ($str, 0,4, ' utf-8 ');//intercept the first 5 words, assuming that the code is located in the PHP file encoded as Utf-8
?>
The results show: the Script House

second, get Chinese length: Mb_strlen ()

Mb_strlen ($str, $encoding)

$str, the string to calculate the length of
$encoding, page encoding, such as UTF-8,GB2312,GBK

Instance:
Copy CodeThe code is as follows:
<?php
$str = ' Script house: Http://www.jb51.net ';
Echo Mb_strlen ($str, ' utf-8 ');//Assuming that the code is in the PHP file encoded as Utf-8
?>
Results showed: 24- Echo Mb_strlen ($news [' n_content '], ' Utf-8 ') > 9? Mb_substr ($news [' n_content '], 0, 9, ' Utf-8 '). ' ..... ': $news [' n_content '];

Limit the number of output words, more than the use of ... Omitted

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.