<!doctype html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>CSS截取中英文混合字符串长度</title>

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <style type="text/css">

        body{font-size:14px;}

        .myCls0{

            width:580px;

            border:1px solid red;

        }

        .myCls1{

            width:580px;

            border:1px solid red;

        }

        .myCls2{

            width:580px;

            border:1px solid red;

            overflow:hidden;        /* 超出隐藏 */

            text-overflow:clip;     /* 文本超出截取 */

        }

        .myCls3{

            width:580px;

            border:1px solid red;

            overflow:hidden;        /* 超出隐藏 */

            text-overflow:ellipsis; /* 文本超出截取，并用...代替 */

        }

    </style>

</head>

<body>

    使用overflow:hidden; text-overflow:ellipsis;两CSS样式属性，可以巧妙的实现截取中英文混合字符串长度的问题，<br />

    以往通过后台程序控制标题长度显示，往往效果不理想，而且前端一旦有调整后台也得调整，使用这两个属性问题解决了！！<br /><br /><br />

    <div class="myCls0">

        勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky!

    </div>

    <br />

    <i>文本不加 nobr 标签，也不设置text-overflow、text-overflow属性</i>

    <br /><br /><br /><br />

    <div class="myCls1">

        <nobr>勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky!</nobr>

    </div>

    <br />

    <i>文本加 nobr 标签，不设置text-overflow、text-overflow属性，结果就真的没有换行，超出来了</i>

    <br /><br /><br /><br />

    <div class="myCls2">

        <nobr>勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky!</nobr>

    </div>

    <br />

    <i>文本加 nobr 标签，设置text-overflow:hidden、text-overflow:clip属性，结果超出的文本被截取了</i>

    <br /><br /><br /><br />

    <div class="myCls3">

        <nobr>勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky!</nobr>

    </div>

    <br />

    <i>文本加 nobr 标签，设置text-overflow:hidden、text-overflow:ellipsis属性，结果超出的文本被截取了，并用...代替</i>

</body>

</html>

CSS截取中英文混合字符串长度的更多相关文章

  1. PHP获取中英文混合字符串长度及截取

    1.字符串长度 PHP获取中英文混合字符串长度的实现代码如下,1中文=1位,2英文=1位,可自行修改 /** * PHP获取字符串中英文混合长度 * @param $str string 字符串 *  ...

  2. PHP针对中英文混合字符串长度判断及截取方法

    PHP自带的函数如strlen().mb_strlen()都是通过计算字符串所占字节数来统计字符串长度的,一个英文字符占1字节.例: $enStr = 'Hello,China!'; echo str ...

  3. 用JS来实现于截取中英文混合字符串方法(转载)

    网站制作过程中,提示层文字超出,需要JS做字符串截取,但是呢,我们常常会烦恼文字中英文混合如何判断,因为我们知道在JS中 string.length这个值是不考虑中英文的,但是计算机对中英文的识别是  ...

  4. PHP中获取中英文混合字符串长度[主要是指个数，而不是字符串长度](转)

    今晚在写框架的表单验证类时,需要判断某个字符串长度是否在指定区间内,很自然地,想到了PHP中的strlen函数. $str = 'Hello world!'; echo strlen($str);   ...

  5. Java 截取中英文混合字符串

    题目: 编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串. 但是要保证汉字不被截半个,如"我ABC"4,应该截为"我AB",输入&q ...

  6. PHP 获取中英文混合字符串长度

    通常情况下要想掌握一个字符串变量的长度[一般掌握其字数],自然想到 strlen |--   $str = 'string'; echo strlen($str); //6 .csharpcode, ...

  7. C# 截取中英文混合字符串分行显示宽度相同

    /// <summary>        /// 截取方法名显示宽度        /// </summary>        /// <param name=" ...

  8. C#截取中英文混合字符串分行显示

    private int GetStrByteLength(string str) { return System.Text.Encoding.Default.GetByteCount(str); } ...

  9. php 中英文混合字符串长度计算

    (strlen($string) + mb_strlen($string,'UTF8')) / 2;tw 这样计算的

随机推荐

  1. Linux 安装Redis<集群版>(使用Mac远程访问)

    阅读本文需要先阅读安装Redis<准备> 一 架构细节 所有的redis节点彼此互联(PING-PONG机制) 内部使用二进制协议优化传输速度和带宽 节点的fail是通过集群中超过半数的节 ...

  2. Throwable、Error、Exception、RuntimeException的区别与联系

    Throwable类是Java语言中所有错误和异常的超类.只有作为此类(或其子类之一)的实例的对象才被Java虚拟机抛出,或者可以被Java throw语句抛出.类似地,只有这个类或其子类之一可以是c ...

  3. 从零开始的Python学习Episode 7——文件基本操作

    文件基本操作 一.打开文件 f = open('11','r')#open('file path','mode') 创建一个文件对象 文件有多种打开模式: 1. 'r':新建一个文件对象以只读方式打开 ...

  4. gets函数的完美替代

    众所周知 在C语言中scanf用来读取一行字符串时遇到空格或回车会停止 而若要读入一行带空格的字符串时 有些人会用gets来代替 然而,gets的最大问题在于:会读取超过数组长度上限个字符,而超出长度 ...

  5. Python多重赋值

    可以将变量名视对象的一个链接 >>>foo1 = foo2 = 4.3 >>>foo1 is foo2 True >>>foo1 = 4.3 &g ...

  6. 第五次ScrumMeeting博客

    第五次ScrumMeeting博客 本次会议于10月29日(日)22时整在3公寓725房间召开,持续15分钟. 与会人员:刘畅.辛德泰.窦鑫泽.张安澜.赵奕. 1. 每个人的工作(有Issue的内容和 ...

  7. DCOM初步窥探二

    1.COM进程透明性表现在“组件对象和客户程序可以拥有各自的空间,也可以共享同一个进程空间”. COM负责把客户的调用正确传到组件对象中,并保证参数传递的正确性. 组件对象和客户代码不必考虑调用传递的 ...

  8. HDU 5286 How far away ？ lca

    题目链接: 题目 How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...

  9. C语言自评

    问卷调查:你对自己的未来有什么规划?做了哪些准备?答:做设计方面的工作:正在努力自学有关这方面的知识 你认为什么是学习?学习有什么用?现在学习动力如何?为什么?答:学习就是增长见识:学习的作用就是为了 ...

  10. C语言的调查

    1.你对自己的未来有什么规划?做了哪些准备?从事跟本专业相关的工作.认真学习好书本的知识,并能很好的运用它. 2.你认为什么是学习?学习有什么用?现在学习动力如何?为什么?学习可以让自己懂得更多,完善 ...