JavaScript-DIV的可见文本

请注意，我希望删除溢出，因此CSS省略号属性对我不起作用。因此，基本上，我希望上面的文本如下所示：

----------------------------------------------------
| This is my text inside a div and I want the overf|low of the text to be cut
----------------------------------------------------

纯JavaScript如何实现这一点

编辑

---

我需要一个JavaScript函数来裁剪文本，因为我需要计算可见文本的字符。

.col{width:40px；overflow:hidden；white space:nowrap；}

空白：nowrap；当内容有空格时需要

---

无论哪种方式，单行中的长单词都不会出现

好吧，我没有看到问题的附录。虽然我之前说过，使用JavaScript和非固定宽度的字体是不可能做到这一点的。。。这实际上是可能的

您可以将每个单独的字符包装在一个

中，并找到父级边界之外的第一个

。比如：

----------------------------------------------------
| This is my text inside a div and I want the overf|
----------------------------------------------------

函数countVisibleCharacters（元素）{
var text=element.firstChild.nodeValue；
var r=0；
element.removeChild（element.firstChild）；
对于（变量i=0；i

---

试试这个，如果你觉得合适的话，它需要一个固定的宽度：

HTML:

---

您正试图将CSS问题强加到JavaScript中。把锤子收起来，拿出螺丝刀

如果你退后一步，解决字符数的答案可能是无关紧要的。最后一个字符可能只是部分可见，并且由于字体大小的变化、W和i之间的宽度差异等，字符数会有很大的不同。在真正的问题中，div的宽度可能比字符数更重要

---

如果您仍然无法确定可见的字符，请在文本周围的div内放置一个span，使用此问题的其他答案中提供的css，然后在JavaScript中从字符串中一次修剪一个字符，直到span的宽度小于div的宽度。然后，每次你对一个大段落这样做时，你的浏览器都会冻结几秒钟。

你可以用Javascript来实现这一点。这是一个计算元素中可见字符数的函数，与应用于元素的外部css表和内联样式无关。我只在Chrome上测试过它，但我认为它是跨浏览器友好的：

.col { 
   width:120px; 
    overflow: hidden;
   white-space:nowrap;

 }​

函数计数\u可见（el）{
var、em、numc；
var text=el.firstChild.data；
var max=el.clientWidth；
var tmp=document.createElement（'span'）；
var node=document.createTextNode（）；
tmp.appendChild（节点）；
文件.正文.附件（tmp）；
if（getComputedStyle）
tmp.style.cssText=getComputedStyle（el，null）.cssText；
else if（el.currentStyle）
tmp.style.cssText=el.currentStyle.cssText；
tmp.style.position='绝对'；
tmp.style.overflow='可见'；
tmp.style.width='auto'；
//估计可以容纳的字符数。
padding=tmp.style.padding；
tmp.style.padding='0'；
tmp.innerHTML='M'；
el.parentNode.appendChild（tmp）；
em=tmp.clientWidth；
tmp.style.padding=填充；
numc=数学地板（最大值/em）；
var-width=tmp.clientWidth；
//以下循环中只有一个将迭代一次以上
//取决于我们是高估了还是低估了。
//添加字符，直到达到溢出宽度
while（宽度

---

---

谢谢你的回答。然而，这不是我想要的。我需要一个javascript函数来裁剪文本，因为我需要计算可见文本的字符数。是的，这只会影响div的大小，请看：我现在意识到它只适用于一个长单词。这就是我用它的目的。再一次，这不是我想要的。不管怎样，还是谢谢你。但是没有办法计算chars@SavasVedova：哦，好的，我刚注意到你的问题。除非使用固定宽度字体，否则这是不可能的。设置div

width

ok吗？如果是这样，只需将其添加到

#myDiv

@timperson:请参阅演示。我没有将特定于应用程序的指标作为规则包含在通用答案中：）您可以设置容器的绝对宽度，但有字母的相对宽度。或者你有固定宽度字体系列？不幸的是，它不是单空格。那么你永远不会知道，有多少个字母fit@ajax333221他再也没有回来过…@robic，仅供参考，提问者编辑了他们的问题，看起来他们需要一个JS解决方案。@Timperson:是的，但这仍然是一个错误的工具。@robich考虑到他们“需要计算可见文本的字符”，什么是正确的工具？我是完全诚实的，也许我很困惑，不知道你指的是什么。@timpeterson我的建议是“需要计算字符数”的前提是有缺陷的。可能真正的问题是“选择合适的div宽度”或“如果页面无法显示，请避免在页面上加载太多数据”或“如果我的内容有长单词，css修剪技术有一个视觉上不吸引人的右栏”。如果只是“修剪过宽的列”，那么就使用CSS。@robich公平地说，我开始认为这个字符计数的最终应用是作为分页策略（例如幻灯片）。所以走JS路线对我来说很有意义。但是，是的，我想我们已经涵盖了所有内容，感谢聊天，为了测试它，请尝试更改css中的宽度，直到下一个字符完全可见（如果JSFiddle的normalize css是完美的，那么应该是304px）。@Delta你能举个例子让我改进它吗？JSFiddle的链接是n

<div class="col">This is my text inside a div and I want the overf|low of the text to be cut</div>

.col { 
   width:120px; 
    overflow: hidden;
   white-space:nowrap;

 }​

function count_visible(el){
    var padding, em, numc;
    var text = el.firstChild.data;
    var max = el.clientWidth;

    var tmp = document.createElement('span');
    var node = document.createTextNode();
    tmp.appendChild(node);
    document.body.appendChild(tmp);

    if(getComputedStyle)
        tmp.style.cssText = getComputedStyle(el, null).cssText;
    else if(el.currentStyle)
        tmp.style.cssText = el.currentStyle.cssText;

    tmp.style.position = 'absolute';
    tmp.style.overflow = 'visible';
    tmp.style.width = 'auto';

    // Estimate number of characters that can fit.
    padding = tmp.style.padding;
    tmp.style.padding = '0';
    tmp.innerHTML = 'M';
    el.parentNode.appendChild(tmp);
    em = tmp.clientWidth;
    tmp.style.padding = padding;      
    numc = Math.floor(max/em);

    var width = tmp.clientWidth;

    // Only one of the following loops will iterate more than one time
    // Depending on if we overestimated or underestimated.

    // Add characters until we reach overflow width
    while(width < max && numc <= text.length){
        node.nodeValue = text.substring(0, ++numc);
        width = tmp.clientWidth;
    }

    // Remove characters until we no longer have overflow
    while(width > max && numc){
        node.nodeValue = text.substring(0, --numc);
        width = tmp.clientWidth;
    }

    // Remove temporary div
    document.body.removeChild(tmp);

    return numc;
}