字符串截取

今天项目要求做一个小的功能点：实现字符串截取，要求在指定宽度中截取字符，这样就会出现一个字符被截取一半的情况。

开始时候想使用CSS样式去做很简单：

    100px;  //元素宽度
    white-space:nowrap; //不换行 
    overflow:hidden;  //内容超出宽度时隐藏超出部分的内容
    text-overflow:ellipsis;        /*  当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。 */  
    display:block;/*内联对象需加*/

　　但是如果是截取多余的字符用（...）来表示是可以的，现在的需求是把多余的部分去除，那CSS就不好实现了（目前我还不知道如何实现）

那就要想别的办法了，真正的画面设计或者说数据处理也就分为样式，js，还有我们用的编码语言（我所学的C#），现在样式不能解决问题，那就想想后面的方法。

这后面两个主要是编码，那就要想想实现字符串截取的逻辑

1.取得要截取的字符串

2.循环拆分【要截取的字符串】重新组合，并【查看组合字符串宽度】是否在指定宽度

2.1.没有超出指定宽度就继续循环拆分【要截取的字符串】重新组合

2.2.超出指定指定宽度不做处理或者退出循环

用C#处理比较麻烦且要用到

Graphics 对象的MeasureString方法并且这个方法的参数要设置具体的字符串的字体属性

string   str;   
str   =   @"一二三 /dff5 4-,. < >";   
Font   f   =   new   Font( "宋体 ",   12);     //字体不同，测量的宽度不同 
Graphics   g   =   this.CreateGraphics();   //this=>Page/控件ID
SizeF   siF   =   g.MeasureString(str,   f);   
MessageBox.Show(siF.Width);   
MessageBox.Show(siF.Height);

　　开发时不一定能很准确的知道自己的项目的所使用的字体，所以果断放弃了。

那现在就剩下Js的方法了：

1.js获取宽度--js通过页面上的HTML标签的属性获取此标签的宽度。

那我们就可以通过此方法实现了：

1.创建一个div标签：主要用于存储字符串获取宽度

<div class="content" id="dvCompute" style="position:absolute;visibility:hidden;"></div>

2.js代码实现

            if (lblLoginUserName != null) {
                var dvCompute = document.getElementById("dvCompute");
                var l_strLoginName = lblLoginUserName.innerText;//要截取的字符串，我放在另一个标签内
                var l_strResult = "";
                for (var i = 0; i < l_strLoginName.length; i++) {
                    l_strResult += l_strLoginName[i];
                    dvCompute.innerHTML = l_strResult;
                    if (dvCompute.offsetWidth > 180) {
                        break;
                    }
                }
            }