当使用CSS样式overflow：hidden时，如何访问在DIV中显示的实际文本？

问题描述

我的页面上有以下内容DIV，其中显示动态文本：

 < div id =someContent > 
< / div> 
  

它使用以下CSS来截断其他文本：

  #someContent {
 height：200px; 
 width：200px; 
 overflow：hidden; 
} 
  

如果我将此文本加载到DIV中：

Lorem ipsum dolor sit amet，consectetuer adipiscing elit。Praesent aliquam，justo convallis luctus rut​​rum，erat nulla fermentum diam，at nonummy quam ante ac quam。Maecenas urna purus，fermentum id，molestie在这种情况下，可以通过使用本发明的方法来实现这一目的，所述方法包括以下步骤：（a）提供包含至少一种选自下列物质的组合物：

... CSS只会在DIV中显示以下文本：

Lorem ipsum dolor sit amet，consectetuer adipiscing elit。Praesent aliquam，justo convallis luctus rut​​rum，erat nulla fermentum diam，at nonummy quam ante ac quam。Maecenas urna purus，fermentum id，molestie in ，commodo porttitor，felis。Nam blandit quam ut lacus。Quisque ornare risus quis ligula。 Phasellus tristique purus a augue

这样可以正常工作。

如果有某种方式我可以使用JavaScript访问显示的文本当我尝试访问DIV的 innerHTML 属性，它返回最初加载到DIV的整个文本

 < script type =text / javascript> 
 alert（document.getElementById（mainArticleContent ）.innerHTML）; 
< / script> 
  

我的最终目标是替换我想我可以在JavaScript中这样做，以便它将显示在所有的浏览器，而不只是IE，如CSS属性<$>任何想法？这是可能的吗？

=h2_lin>解决方案

我不认为你要求做的是可能的javascript。

截断文本在特定字符计数服务器端？根据您选择的字体，您可能不会对显示在页面上的div的大小有什么控制，但它应该可以解决您的问题。

编辑：

查看来获取自动CSS省略号。有几个注意事项，它看起来漂亮的浏览器特定，但这是另一种方法来做你想要的。

I have the following content DIV on my page, which displays dynamic text:

<div id="someContent">
</div>

It uses the following CSS to cut off additional text:

#someContent {
    height: 200px;
    width: 200px;
    overflow: hidden;
}

If I load this text into the DIV:

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti."

...the CSS causes only the following text to display in the DIV:

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue"

This works as expected.

However, I was wondering if there is some way that I can access the displayed text using JavaScript. When I try to access the innerHTML property of the DIV, it returns the entire text originally loaded into the DIV.

<script type="text/javascript">
    alert(document.getElementById("mainArticleContent").innerHTML);
</script>

My end goal is to replace the last word in the trimmed content with ellipsis ("..."). I figured I could do this in JavaScript so that it will display in all browsers, not just IE, as with CSS property text-overflow: hidden.

Any ideas? Is this possible?

解决方案

I don't think what you're asking to do is possible with javascript.

Alternatively, why not truncate the text at a specific character count server-side? You probably won't have the kind of control you want over the size of the div displayed on the page depending on the font you've selected but it should solve your problem.

Edit:

Take a look at this to get automatic CSS ellipsis. There are a few caveats and it looks pretty browser-specific but this is another method of doing what you want.

这篇关于当使用CSS样式overflow：hidden时，如何访问在DIV中显示的实际文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！