3 回答

TA貢獻1898條經驗 獲得超8個贊
您可以使用引導程序 4 類text-truncate
<span class="d-inline-block text-truncate" style="max-width: 150px;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </span>

TA貢獻1856條經驗 獲得超5個贊
我認為更好的方法是使用 CSS 來“剪切”內容。max-width在列上設置并更正文本溢出值:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
您將保留您的數據并獲得良好的動態截斷。
編輯
如果您仍想編輯數據,我建議substr您在訂閱中使用,如下所示:
this.newsService.getnews().subscribe(res => {
this.news= res;
this.pageNews = this.news.slice(0, 10).map((post) => {
return {
...post,
name: post.name.substring(0, 10) + '...'
}
});
}

TA貢獻1850條經驗 獲得超11個贊
我建議使用角管:https ://angular.io/guide/pipes
代碼可能看起來像這樣:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'StringTrunctuater'})
export class StringTrunctuaterPipe implements PipeTransform {
transform(value: string): string {
return value.slice(0,20)+"...";
}
}
并像這樣使用:
<td class="row-mid">{{u.text| StringTrunctuater}}</td>
添加回答
舉報