0
角度フレックスレイアウトを使用するプロジェクトで忙しいです。私は2つの列からなるリストを持っています。各列は、アイコンの横にテキストのあるアイコンからなるマットリスト角度材料リストです。 fxLayoutWrap = "wrap"を親fxLayout行コンテナに追加しましたが、各列の最大幅（35％）に達したときに次の行に折り返す代わりに、angle-flex-layoutまたはangular-materialリストが...を追加します次の行に折り返すのではなく、テキストの終わりです。どのように私は/ここで何が起こっているこれを修正について行くことができる任意のアイデア？私がこれを修正するために考えられる唯一の方法は、テキストの真ん中に収まらないbrタグを追加することです。これは悪い解決策のように思えます。なぜなら、brのテキストを追加するための良い場所を常に検索しなければならないので、次の行に折り返す必要があります。angular-flex-layout：fxLayoutWrapは、テキストを次の行に折り返す代わりに収まるテキストに追加します。
問題のスクリーンショット：
私のコード：あなたは、コンテナのwhite-space: wrapと一緒text-overflow: ellipsisを持っているよう
<br /><br /><br /><br />
<div fxLayout class="noOverflow" fxLayoutAlign="start start" fxLayoutWrap>
<div fxFlex>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start start" fxLayoutWrap="wrap">
<div fxFlex="100%">
<h1>Dashboard</h1>
</div>
<div fxFlex="81%">
<p>Lorem ipsum dolor sit amet, eum iuvaret delicata at. Eu postea commodo persius mei. Id est semper constituto, ignota aperiri adversarium ne vix. Id est impetus suscipit, nulla meliore epicuri id eos. <br /> Ad pro modo albucius atomorum. At mel ullum libris debitis, in vero apeirian mediocrem mei.</p>
</div>
<div fxFlex="81%">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<div fxFlex="81%">
<h2>Sample Angular/Flex Column Layout</h2>
</div>
</div>
<div fxLayout fxLayoutGap="15px" fxLayoutAlign="center start">
<div fxFlex="23%">
<h3>Notes</h3>
<ul>
<li>we're using responsive css & Angular(Angular-material & Angular/flex) This allows us to show (or hide) things like the left menu and the number of columns displayed by dataTables.</li>
<li>The amount of "Custom" css we've used is actually very little, prefering rather to make use of the framework's built in features.</li>
<li>Angular reactive forms and validators should probably replace the generic php form.</li>
<li>No server side php is used.</li>
</ul>
</div>
<div fxFlex="23%">
<h3>Example views</h3>
<ul>
<li><a href="#">Login Screen</a></li>
<li><a href="#">Home Page</a> » Ledger system » Sales ledger » Customer master files</li>
<li><a href="/customerMaster">Customer Master</a></li>
<li><a href="#">Customer Master Search</a></li>
<li><a href="#">Customer Master List</a></li>
<li><a href="#">detail Customer Master</a></li>
<li><a href="#">update Customer Master</a></li>
<li><a href="#">detail Account</a> - Click on suburb <i class="fa fa-info-circle"></i></li>
<li><a href="#">Lookup Screen(Generic)</a> - Click on suburb <i class="fa fa-search"></i></li>
</ul>
</div>
<div fxFlex="23%">
<h3>Keyboard Shortcuts</h3>
<ul>
<li><Ctrl + b: Go back/li>
<li>Ctrl + i: Launch info</li>
<li>Ctrl + h: Launch help</li>
<li>Ctrl + l: Show or hide menu</li>
<li>Ctrl + n: Add new item</li>
<li>Ctrl + p: Print</li>
<li>Ctrl + r: reload table data</li>
<li>Ctrl + <em>any other</em> page specific function you ned</li>
</ul>
</div>
</div>
<div fxLayout>
<h2>Quick Links & Favourites</h2>
</div>
<div fxLayout fxLayoutAlign="center start" fxLayoutWrap="wrap">
<div fxFlex="35%">
<mat-list>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-archive fa-2x"></mat-icon>
<a matLine href="#">Stock System</a>
<span matLine>Nam ultricies enim id sapien dignissim, in facilisis neque blandit, te corrumpit vituperata constituam pri.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-shopping-cart fa-2x"></mat-icon>
<a matLine href="#">Sales Purchases</a>
<span matLine>Donec cursus augue sit amet suscipit volutpat. Ne dignissim sadipscing pro. Munere scripta temporibus mel at.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-sticky-note fa-2x"></mat-icon>
<a matLine href="#">Stock Ordering</a>
<span matLine>Integer placerat libero ac dui hendrerit lacinia. Brian semper constituto, ignota aperiri adversarium ne vix.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-book fa-2x"></mat-icon>
<a matLine href="#">Ledger System</a>
<span matLine><a href="#">Ledger System</a> »
<a href="#">Sales Ledger</a>»
<a href="#">Customer Master Files</a>»
<a href="#">Customer Master</a></span>
<span matLine>Purus scelerisque, dapibus felis sit amet, accumsan est.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-money fa-2x"></mat-icon>
<a matLine href="#">POS Control</a>
<span matLine>Pellentesque id purus scelerisque, dapibus felis sit amet, accumsan est. Diceret dissentiunt ad sea, te corrumpit vituperata constituam pri.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-tablet fa-2x"></mat-icon>
<a matLine href="#">PDCU Control</a>
<span matLine>In vestibulum dui sed dapibus accumsan. Id est semper constituto, ignota aperiri adversarium ne vix.</span>
</mat-list-item>
</mat-list>
</div>
<div fxFlex="35%">
<mat-list>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-line-chart fa-2x"></mat-icon>
<a matLine href="#">Price Change System</a>
<span matLine>Integer placerat libero ac dui hendrerit lacinia. Brian semper constituto, ignota aperiri adversarium ne vix.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-building fa-2x"></mat-icon>
<a matLine href="#">HO Coms</a>
<span matLine>Donec cursus augue sit amet suscipit volutpat. Ne dignissim sadipscing pro. Munere scripta temporibus mel at.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-plane fa-2x"></mat-icon>
<a matLine href="#">Auto Pilots</a>
<span matLine>Fusce eget velit tincidunt erat sollicitudin eleifend in in odio. Integer placerat libero ac dui hendrerit lacinia.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-hashtag fa-2x"></mat-icon>
<a matLine href="#">Additional</a>
<span matLine>Fusce eget velit tincidunt erat sollicitudin eleifend in in odio. In vestibulum dui sed dapibus accumsan.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-desktop fa-2x"></mat-icon>
<a matLine href="#">Workspaces</a>
<span matLine>matLinePellentesque id <a href="#">Customer Master</a> purus scelerisque, dapibus felis sit amet, accumsan est.</span>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon class="fa fa-cogs fa-2x"></mat-icon>
<a matLine href="#">System Config</a>
<span matLine>Pellentesque id purus scelerisque, dapibus felis sit amet, accumsan est. Diceret dissentiunt ad sea, te corrumpit vituperata constituam pri.</span>
</mat-list-item>
</mat-list>
</div>
</div>
<div fxLayout fxLayoutAlign="center start">
<div fxFlex="70%">
<hr>
<p>Numquam honestatis neglegentur ex duo, ad vix movet tollit tantas. Cu quaeque labores debitis vis, dicta eruditi eligendi ex vim. Est mentitum
voluptaria te. Decore aperiri explicari cu usu, suas saepe accumsan ea usu. In vim modo accusata, ad audire delenit prodesset usu.</p>
<hr>
</div>
</div>
<div fxLayout fxLayoutGap="20px" fxLayoutAlign="center start">
<div fxFlex="23%" class="centered">
<h2>Heading</h2>
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
</p>
<p><button mat-raised-button><a href="#">View Details</a></button></p>
</div>
<div fxFlex="23%" class="centered">
<h2>Heading</h2>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
</p>
<p><button mat-raised-button><a href="#">View Details</a></button></p>
</div>
<div fxFlex="23%" class="centered">
<h2>Heading</h2>
<p>
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p><button mat-raised-button><a href="#">View Details</a></button></p>
</div>
</div>
<div fxLayout fxLayoutGap="20px" fxLayoutAlign="center start">
<div fxFlex="23%" class="centered">
<h2>Heading</h2>
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
</p>
<p><button mat-raised-button><a href="#">View Details</a></button></p>
</div>
<div fxFlex="23%" class="centered">
<h2>Heading</h2>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
</p>
<p><button mat-raised-button><a href="#">View Details</a></button></p>
</div>
<div fxFlex="23%" class="centered">
<h2>Heading</h2>
<p>
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p><button mat-raised-button><a href="#">View Details</a></button></p>
</div>
</div>
<div fxLayout fxLayoutAlign="center start">
<div fxFlex="81%" class="centered">
<p>Copyright Trade Link © 2017</p>
</div>
</div>
</div>
</div>