<!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. 2019年猪年颁奖典礼、公司年会、跨年晚会、科技会议、年终答谢会之幕布背景展板PSD模板-第三部分

    16套--2019年猪年颁奖典礼.公司年会.跨年晚会.科技会议.年终答谢会之幕布.背景和展板PSD模板,免费颁奖典礼PSD展板背景幕布,下载地址:百度网盘,https://pan.baidu.com/ ...

  2. 「日常训练」Magic Stones（CodeForces-1110E）

    题意 给定两个数组c和t,可以对c数组中的任何元素变换\(c_i\)​成\(c_{i+1}+c_{i-1}-c_i\)​,问c数组在若干次变换后能否变换成t数组. 分析 这种魔法题目我是同样的没做过. ...

  3. 「Leetcode」974. Subarray Sums Divisible by K（Java）

    分析 这题场上前缀和都想出来了,然后就没有然后了...哭惹.jpg 前缀和相减能够得到任意一段连续区间的和,然后他们取余\(K\)看余数是否为0就能得到.这是朴素的遍历算法.那么反过来说,如果两个前缀 ...

  4. Intellij IDEA 热部署插件Jrebel激活

    激活前请确保已经安装好了Jrebel插件,本文通过反向代理激活. 第一步:下载激活工具(即代理工具),下载地址:https://github.com/ilanyu/ReverseProxy/relea ...

  5. 假回溯-uva140带宽

    题目链接:https://vjudge.net/problem/UVA-140 题解:这道题利用全排函数即可解决,但是这道题技巧性强,稍微不注意就会超时,一开始没有想起全排函数,自己写回溯全排超时了, ...

  6. 用EC5/EC6自定义class的区别及用法 -- Phaser3网页游戏框架

      custom class EC6 自定义class class Brain extends Phaser.GameObjects.Sprite { constructor (scene, x, y ...

  7. Numpy入门笔记第三天

    __TITLE__ = "利用Numpy进行历史股价分析" __DATASOURCE__ = "ATAGURU" # CSV文件读取 import numpy ...

  8. 转:为什么说招到合适的人比融到钱更加重要 - Hiring Great Talent is More Important Than Fund Raising

    我在猎头行业工作了 20 多年,一直在帮助创业公司招聘优秀的人才.我服务过的客户既有 VC 投资的初创企业,也有即将 IPO 的公司.我和 200 多个 VC 合作过,也见过 300 多个客户失败的案 ...

  9. 城联数据TSM技术方案起底

    近日,城联数据有限公司与中国电信签订了<基于NFC技术的公交业务的合作协议>.双方基于NFC技术开展互联互通城市公交卡业务合作,实现符合住房和城乡建设部城市公用事业互联互通卡系列标准的移动 ...

  10. php爬虫学习笔记1 PHP Simple HTML DOM Parser

    常用爬虫. 0. Snoopy是什么? (下载snoopy)   Snoopy是一个php类,用来模仿web浏览器的功能,它能完成获取网页内容和发送表单的任务.   Snoopy的一些特点:   * ...