<table id="file_year-files" class="table table-striped table-hover table-sm" style="white-space: nowrap;"> <tbody> <tr> <td>Certificado empresa pagadora</td> <td>Certificado de desplazamiento</td> <td> <div class="input-group p-0" style="display: flex;flex-wrap: nowrap;flex-direction: row;"> <button type="button" class="btn btn-primary btn-sm" role="button" title="Editar documento"><i class="fa fa-edit"></i></button> <button type="button" class="btn btn-primary btn-sm" role="button" title="Descargar documento"><i class="fa fa-download"></i></button> <button type="button" class="btn btn-primary btn-sm" role="button" title="Eliminar documento"><i class="fa fa-trash"></i></button> </div> </td> </tr> </tbody> </table>
： <div class="container-fluid"> <div class="row flex-nowrap"> <div class="col-auto px-0"> <div id="sidebar" class="collapse collapse-horizontal show border-end"> <div class="card" style="max-width: 100%;"> <div class="card-header" [ngClass]="{ 'text-bg-secondary': 0 === 0 }"> <h5>Documents List</h5> </div> <div class="card-body"> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between align-items-start" *ngFor="let t of dataSource() | paginate: {itemsPerPage:10,currentPage:p}; index as i" (click)="selectedRow(t, i)" [ngClass]="{ 'text-bg-primary': t === rowSelected }">{{ t.title }}</li> </ul> </div> <div class="card-footer"> <pagination-controls (pageChange)="p = $event"></pagination-controls> </div> </div> </div> </div> <main class="col ps-md-2 pt-2"> <a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none" [attr.aria-expanded]="true"><i class="bi bi-list bi-lg py-2 p-1"></i> Pdf Document</a> <router-outlet></router-outlet> </main> </div> </div> intring.module.ts const routes: Routes = [ { path: 'books/:folder', component: DocViewerComponent, //children: [{ // path: './:title', // component: PdfViewerComponent //}] }, { path: 'books/:folder/:title', component: PdfViewerComponent, } ]; COMPONENT.TS selectedRow(row: any, index: number) { this.router.navigate(['/doc/books', this.fileFolder, row.title], { relativeTo: this.activatedRoute }) } 它之所以工作是因为路径：'books/：文件夹'和路径：'books/：folder/：title'是不同的孩子（当它显示pdf文件时，数据源中的列表消失了）。 我的目标是将PDFViewerComponent组件放在DocViewerComponent组件的孩子中。 但是，我不知道如何将其从docviewercomponent组件导航到Child PDFViewerComponent组件。 我尝试将名称放在其中，但仍然不起作用。 我为任何投入/想法提供了认可。 谢谢 当前路线是books/:folder，您想导航到孩子:title，因此您需要做的只是指定标题。 selectedRow(row: any, index: number) { this.router.navigate([row.title], { relativeTo: this.activatedRoute }); }
这个片段显示了我想要的： http://jsfiddle.net/945Df/3/ 阿根廷圣达菲罗萨里奥。 这个片段显示了我想要的： http://jsfiddle.net/945Df/3/ <div class="sup" id="pr"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span></strong> </div> <div class="sup"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span> </strong> </div> 当div的宽度（在项目中，视口）没有更多空间时，我希望跨度落入新行。 抱歉我的解释不好。我不知道该怎么做。谢谢！ 编辑：在第二个示例中，短语“SEPTIEMBRE DE 2013”。落入新行。但“17 DE”字样仍位于上行。我想要“2013 年 9 月 17 日”。落入新行。明白了吗？ 如果您希望跨度不换行，而是完全移动到其他文本下方，您可以使用 white-space: nowrap; .date { text-transform: uppercase; color:#848484; white-space:nowrap; } 演示 要让span在空间不足时跳到下一行，可以设置为display: inline-block; .date { display: inline-block; ... } 检查这个：http://jsfiddle.net/945Df/7/ 这就是我实现它的方法： #spantomovedown{ clear: both; display: inline-block; width: 100%; } .date{display:inline-block;} 当日期比div长时，换行显示 示例：http://jsfiddle.net/TqRyK/ 如果你漂浮：对；当不再有空间容纳整个内容时，它应该落到下一行。 之后您将需要一个清除元件。 我通过以下方式实现了它 word-wrap: break word;