我想在我的网站上创建一个搜索者,问题是当我显示我的数据库的结果时,一些人有一个非常大的描述,我试图截断描述,以使其更具视觉效果。 / p>
我想要做的是显示一个应该是这样的描述:
blablabla描述bla bla bla更多描述
进入这个:
blablabla描述bla bla bla mo ...
我想要显示的最大长度是340个字符,我想到的代码就是这个
...
var newText = document.createElement("p"); //i create a new element of text
var newContent = document.createTextNode(projects.description); //i set the text to
//be the description from the database [the type of this var is Text]
if(newContent.length > 340) { //if the description is bigger than 340
var result=newContent + ""; //i convert the newContent type to string since
//substring only works with strings and not Text
result=result.substring(0, 337)+"..."; //i trunc the description
newContent=result; // <-- here i need to assign the result[string] to newContent[Text]
}
newText.appendChild(newContent);
...
希望您能告诉我如何再次将字符串转换为Text或以其他方式截断描述。
谢谢,Bertran
答案 0 :(得分:1)
这里的问题是您将对字符串的引用而不是对文本节点的引用传递给您创建的段落元素的appendChild
方法。
var newContent = document.createTextNode(projects.description);
在此行中,您将创建一个文本节点,并将对此文本节点的引用放入变量newContent
。
newContent = result;
在此行中,您将变量newContent
的值替换为您创建的字符串的引用。
您有很多解决方案可供选择,但这里有两个明显的选择。
一种解决方案是访问文本节点的nodeValue
属性以设置其内容:
var newContent = document.createTextNode(projects.description);
if (newContent.nodeValue.length > 340)
newContent.nodeValue = newContent.nodeValue.substring(0, 337) + '...';
另一种选择是第一次将createTextNode
参数传递给正确的字符串。三元运算符可以在这里运行良好:
var newContent = document.createTextNode(
projects.description.length > 340
? projects.description.substring(0, 337) + '...'
: projects.description);
现在,当您将newContent
附加到段落元素newText
时,它会将引用传递给文本节点,而不是字符串。
newText.appendChild(newContent);
注意,用户@epascarello评论说存在一个CSS规则,可以自动将省略号添加到文本而无需JavaScript。这是一个link to an explanation of the rule。请注意,这是CSS3规则。
这是另一个StackOverflow Q&amp; A,它处理了这个问题的前提。