当控件的宽度固定时修剪HTML文本

分享于 

4分钟阅读

Web开发

  繁體

屏幕截图- trim_text.jpg

介绍

本文描述了当控件的宽度固定时如何修剪HTML文本。 包含文本的HTML控件的一个问题是,我们可以使高度或者宽度属性保持固定,从而保持另一个。 有时长文本的控件增长时,会导致对齐问题。

这个问题有一个解决方案,只显示文本的一部分,比如前 50个字符。 这里解决方案在每次加载页面时修复控件的大小时出现问题。

所以我得做一些r&来找到另一个解决方案。 最后我找到了一种服务的方法: 将文本修整到给定宽度,最后附着"。",并显示工具提示中的完整文本。

Background

behind的基本思想是找出适合于给定控件的文本宽度。

首先,使用与原始控件相同的属性动态创建 span 控件。 从原始文本开始,span 中的字符逐一减少,直到动态 span的宽度变小或者等于所需宽度。 最后,将裁剪文本分配给原始 span,并删除动态添加的控件。

使用代码

动态创建控件非常简单。 在desired方法的基础上,使用所需的标记创建对象,并调用 objDiv.appendChild(objSpan) 方法附加到父控件中,在本例中是 objDiv

// create span and div objects dynamicallyvar objDiv = document.createElement("DIV");var objSpan = document.createElement("SPAN");// add the dynamic controls to documentobjDiv.appendChild(objSpan);
ctrl.offsetParent.appendChild(objDiv);

下一个挑战是找出文本的宽度。 文本的宽度取决于控件的样式。 在创建控件时,所有影响宽度的属性被复制,并将控件添加到原始 span 控件的父控件,即 ctrl.offsetParent。 由此,所有未分配但继承自父标记的属性也被复制。 然后,为宽度为确定的objSpan 指定一些文本。 现在,objSpan的宽度将给出浏览器上文本的实际宽度。

需要的宽度可以在任何单位中得到,它将被转换为像素。 我们可以使用 spanConvert.style.width 指定特定单位的宽度。 但是当我们得到 spanConvert.offsetWidth 时,我们将得到等价宽度的像素。

下一步是修剪符合所需宽度的文字。 为这里,每次从末尾移除一个字符,直到宽度变小或者等于所需宽度。

// while width of dynamic span is greater than final widthwhile(widthTemp> widthFinal && lengthText> 0)
{
 // reduce one character from original text lengthText--;
 textTrimmed = textOrigional.substring(0, lengthText);
 // get width of reduced text objSpan.innerHTML = textTrimmed;
 widthTemp = objSpan.offsetWidth;
}

在 上面 代码中,textTrimmed 将有修剪的文本,并将"。"附加到该文本将显示在屏幕上的文本。


控制  文本  TEX  wid  FIX  Fixed  
相关文章