我在控制台中看到了我期望的子字符串,但是HTML中未更改原始字符串。
最终结果应截断每个表<td>
中的任何长文本。
注意:我不想在每个<td>
的HTML中使用limitTo,因为此解决方案是对使用数千个表的大型应用程序的测试,我们不想手动为更长的内容添加限制。
这是我遇到问题的JS代码段:(我留了言,因为它们是解决问题的相关尝试)
// force table content to wrap to next line after 30 characters (limit set in CSS)
for (var i = 0; i < tableTD.length; i++){
var text = tableTD[i].textContent;
//var truncatedText = '';
if(text.length > 30 ) {
tableTD[i].classList.add('wrap');
truncate(text, 60);
//truncatedText = truncate(text, 60);
//return truncatedText;
} else { tableTD[i].classList.add('nowrap'); }
}
// testing
// function truncate(str, num){
// var truncatedStr = '';
// if (str.length > num) {
// truncatedStr = str.slice(0, (num - 2)) + '...'
// }
// return truncatedStr;
// };
function truncate(str, num){
truncateStr = str.slice(0, (num - 2)) + '...';
return truncateStr
}
这里是完整的JS(angularjs 1.6.9):
var app = angular.module('myApp', []);
app.controller('karinasSandboxCtrl', function($scope)
{
// create some lines of data
$scope.records = [
{
"Name" : "Peter Rabbit",
"Age" : "34",
"Hobbies" : "Peter Rabbit: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
"NumberOne" : ".01",
"NumberTwo" : "2828.09",
"NumberThree" : "33829749.00",
"NumberFour" : "379234738.0922",
"ContentToMakeLonger1" : "blah-de blah blah blah",
"ContentToMakeLonger2" : "doop-dee-doo",
"ContentToMakeLonger3" : "blooooop",
"ColumnOne" : "One",
"ColumnTwo" : "Two Two",
"ColumnThree" : "Three Three Three",
"ColumnFour" : "Four Four Four Four",
"Notes" :"Peter Rabbit: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
} , {
"Name" :"Sailor Moon",
"Age" :"22",
"Hobbies" : "Sailor Moon: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
"NumberOne" : ".11",
"NumberTwo" :"28.09",
"NumberThree" : "33829749.00",
"NumberFour":"379234738.0922",
"ContentToMakeLonger1" : "blah-de blah blah blah",
"ContentToMakeLonger2" : "doop-dee-doo",
"ContentToMakeLonger3" : "blooooop",
"ColumnOne" : "One",
"ColumnTwo" :"Two Two",
"ColumnThree" : "Three Three Three",
"ColumnFour":"Four Four Four Four",
"Notes" :"Sailor Moon: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
} , {
"Name" : "Fire Lizard",
"Age" :"987",
"Hobbies" : "Fire Lizard: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
"NumberOne" : ".11",
"NumberTwo" :"28.09",
"NumberThree" : "33829749.00",
"NumberFour":"379234738.0922",
"ContentToMakeLonger1" : "blah-de blah blah blah",
"ContentToMakeLonger2" : "doop-dee-doo",
"ContentToMakeLonger3" : "blooooop",
"ColumnOne" : "One",
"ColumnTwo" :"Two Two",
"ColumnThree" : "Three Three Three",
"ColumnFour":"Four Four Four Four",
"Notes" :"Fire Lizard: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
}, {
"Name" : "Tommy Turtle",
"Age" :"24",
"Hobbies" : "Tommy Turtle: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
"NumberOne" : ".11",
"NumberTwo" :"28.09",
"NumberThree" : "33829749.00",
"NumberFour":"379234738.0922",
"ContentToMakeLonger1" : "blah-de blah blah blah",
"ContentToMakeLonger2" : "doop-dee-doo",
"ContentToMakeLonger3" : "blooooop",
"ColumnOne" : "One",
"ColumnTwo" :"Two Two",
"ColumnThree" : "Three Three Three",
"ColumnFour":"Four Four Four Four",
"Notes" :"Tommy Turtle: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
} , {
"Name" : "Henry Hilgard",
"Hobbies" : "Henry Hilgard: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
"NumberOne" : ".11",
"NumberTwo" :"28.09",
"NumberThree" : "33829749.00",
"NumberFour":"379234738.0922",
"ContentToMakeLonger1" : "blah-de blah blah blah",
"ContentToMakeLonger2" : "doop-dee-doo",
"ContentToMakeLonger3" : "blooooop",
"ColumnOne" : "One",
"ColumnTwo" :"Two Two",
"ColumnThree" : "Three Three Three",
"ColumnFour":"Four Four Four Four",
"Notes" :"Henry Hilgard: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
}
];
angular.element(document).ready(function(){
var tableTD = document.querySelectorAll('table td');
// testing
var str = "Testing the substring thingy here to see if it will work";
document.getElementById("demo").textContent = truncate(str, 20);
// force table content to wrap to next line after 30 characters (limit set in CSS)
for (var i = 0; i < tableTD.length; i++){
var text = tableTD[i].textContent;
//var truncatedText = '';
if(text.length > 30 ) {
tableTD[i].classList.add('wrap');
truncate(text, 60);
//truncatedText = truncate(text, 60);
//return truncatedText;
} else { tableTD[i].classList.add('nowrap'); }
}
// testing
// function truncate(str, num){
// var truncatedStr = '';
// if (str.length > num) {
// truncatedStr = str.slice(0, (num - 2)) + '...'
// }
// return truncatedStr;
// };
function truncate(str, num){
truncateStr = str.slice(0, (num - 2)) + '...';
return truncateStr
}
});
});
这里是表格HTML:
<table ng-controller="karinasSandboxCtrl">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Hobbies</th>
<th>Number 1</th>
<th>Number 2</th>
<th>Number 3</th>
<th>Number 4</th>
<th>Content To Make Longer 1</th>
<th>Content To Make Longer 2</th>
<th>Content To Make Longer 3</th>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
<th>Column Four</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Age}}</td>
<td>{{x.Hobbies}}</td>
<td>{{x.NumberOne}}</td>
<td>{{x.NumberTwo}}</td>
<td>{{x.NumberThree}}</td>
<td>{{x.NumberFour}}</td>
<td>{{x.ContentToMakeLonger1}}</td>
<td>{{x.ContentToMakeLonger2}}</td>
<td>{{x.ContentToMakeLonger3}}</td>
<td>{{x.ColumnOne}}</td>
<td>{{x.ColumnTwo}}</td>
<td>{{x.ColumnThree}}</td>
<td>{{x.ColumnFour}}</td>
<td>{{x.Notes }}</td>
</tr>
</tbody>
</table>
这里是相关的CSS:
td {
padding: 6px 12px;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
max-width: 30ch; // "ch" limits number of characters per line.
&.nowrap {
white-space: nowrap;
}
&.wrap {
white-space: normal;
min-width: 29ch; // so the line will not wrap before 29ch
}
}
我对javascript很陌生,所以这里可能缺少一些内容。感谢您的帮助:)
您实际上是在截断文本,但是在更改后您没有将其分配给变量。
[将text
传递给truncate(text, 60)
时,仅text
变量的值被截断,没有内容将应用于HTML内容本身。