blocks|key|82710|text|++++<mat-list>
++++++++++<mat-list-item+class="no-wrap">++++++++++++++++++++
++++++++++++++<h3+class="name">+<span+class="nobreak">+{{firstName}}+{{lastName}}++</h3>+++++++++++++++++++++++++++++++++++++++
++++++++++</mat-list-item>+
++++++++++<mat-divider></mat-divider>++
++++++++++<mat-list-item+class="no-wrap"+*ngIf="position+&&+company">+<span+class="nobreak">+{{position}}+at+{{company}}++</mat-list-item>
++++++++++<div+class="gap"></div>++++
++++++++++<mat-list-item+class="no-wrap">
++++++++++++++<mat-icon>email</mat-icon>
++++++++++++++<span+class="email">+{{email}}+
++++++++++</mat-list-item>
++++</mat-list>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|82711|css|unstyled|82712|+.no-wrap+{
+++overflow:+hidden;
+++text-overflow:+ellipsis;
+++white-space:+nowrap;
+}|82713|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code> &lt;mat-list&gt;
 &lt;mat-list-item class="no-wrap"&gt; 
 &lt;h3 class="name"&gt; &lt;span class="nobreak"&gt; {{firstName}} {{lastName}} &lt;/span&gt; &lt;/h3&gt; 
 &lt;/mat-list-item&gt; 
 &lt;mat-divider&gt;&lt;/mat-divider&gt; 
 &lt;mat-list-item class="no-wrap" *ngIf="position &amp;&amp; company"&gt; &lt;span class="nobreak"&gt; {{position}} at {{company}} &lt;/span&gt; &lt;/mat-list-item&gt;
 &lt;div class="gap"&gt;&lt;/div&gt; 
 &lt;mat-list-item class="no-wrap"&gt;
 &lt;mat-icon&gt;email&lt;/mat-icon&gt;
 &lt;span class="email"&gt; {{email}} &lt;/span&gt;
 &lt;/mat-list-item&gt;
 &lt;/mat-list&gt;
</code></pre>

css

<pre><code> .no-wrap {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
</code></pre>

blocks|key|80717|text|运行Angular+11.X|type|unstyled|depth|inlineStyleRanges|entityRanges|data|80718|另一种选择是在树周围添加一个滚动视口，然后将mat-+tree+-节点的CSS设置为空白:+nowrap|offset|length|style|BOLD|80719|<mat-card>
++<mat-card-content>
++++<cdk-virtual-scroll-viewport+itemSize="30"+class="tree">
++++++<ng-container+*cdkVirtualFor="let+item+of+dataSource"></ng-container>
++++++<mat-tree+[dataSource]="dataSource"+[treeControl]="treeControl">
++++++++<mat-tree-node+*matTreeNodeDef="let+node"+matTreeNodeToggle+matTreeNodePadding+matTreeNodePaddingIndent="20px"+class="tree-node">
++++++++++<button+mat-icon-button+disabled></button>
++++++++++{{node.name}}
++++++++</mat-tree-node>
++++++++<mat-tree-node+*matTreeNodeDef="let+node;+when:+hasChild"+matTreeNodePadding+matTreeNodePaddingIndent="20px"+class="tree-node">
++++++++++<button+mat-icon-button+matTreeNodeToggle+[attr.aria-label]="'Toggle+'+%2B+node.name">
++++++++++++<mat-icon+class="mat-icon-rtl-mirror">
++++++++++++++{{treeControl.isExpanded(node)+?+'expand_more'+:+'chevron_right'}}
++++++++++++</mat-icon>
++++++++++</button>
++++++++++{{node.name}}
++++++++</mat-tree-node>
++++++</mat-tree>
++++</cdk-virtual-scroll-viewport>
++</mat-card-content>
</mat-card>|code-block|syntax|javascript|80720|CSS|80721|.type-icon+{
++color:+#757575;
++margin-right:+5px;
}

.tree-node+{
++height:+30px;
++min-height:+30px;
++white-space:+nowrap;
}

.tree+{
++height:+600px;
}|80722|entityMap^0|0|E|4|M|B|16|A|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

Running Angular 11.X 
Another option is to add a scrolling viewport around your tree, then set the CSS for your mat-tree-node to white-space: nowrap
<pre><code>&lt;mat-card&gt;
 &lt;mat-card-content&gt;
 &lt;cdk-virtual-scroll-viewport itemSize=&quot;30&quot; class=&quot;tree&quot;&gt;
 &lt;ng-container *cdkVirtualFor=&quot;let item of dataSource&quot;&gt;&lt;/ng-container&gt;
 &lt;mat-tree [dataSource]=&quot;dataSource&quot; [treeControl]=&quot;treeControl&quot;&gt;
 &lt;mat-tree-node *matTreeNodeDef=&quot;let node&quot; matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=&quot;20px&quot; class=&quot;tree-node&quot;&gt;
 &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
 {{node.name}}
 &lt;/mat-tree-node&gt;
 &lt;mat-tree-node *matTreeNodeDef=&quot;let node; when: hasChild&quot; matTreeNodePadding matTreeNodePaddingIndent=&quot;20px&quot; class=&quot;tree-node&quot;&gt;
 &lt;button mat-icon-button matTreeNodeToggle [attr.aria-label]=&quot;'Toggle ' + node.name&quot;&gt;
 &lt;mat-icon class=&quot;mat-icon-rtl-mirror&quot;&gt;
 {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
 &lt;/mat-icon&gt;
 &lt;/button&gt;
 {{node.name}}
 &lt;/mat-tree-node&gt;
 &lt;/mat-tree&gt;
 &lt;/cdk-virtual-scroll-viewport&gt;
 &lt;/mat-card-content&gt;
&lt;/mat-card&gt;
</code></pre>
CSS
<pre><code>.type-icon {
 color: #757575;
 margin-right: 5px;
}

.tree-node {
 height: 30px;
 min-height: 30px;
 white-space: nowrap;
}

.tree {
 height: 600px;
}
</code></pre>

In my Angular Material Application I have a list (mat-list) with several rows (mat-list-items).

I'm trying to prevent the mat-list-items from wrapping their content.

For example, instead of this:

<blockquote>
 IT Architect 
 at General Electric
</blockquote>

it shall look like this:

<blockquote>
 IT Architect at General Electric
</blockquote>

Here is the html:

component.html:

<pre><code>&lt;mat-list&gt;
 &lt;mat-list-item class="no-wrap"&gt; 
 &lt;h3 class="name"&gt; {{firstName}} {{lastName}} &lt;/h3&gt; 
 &lt;/mat-list-item&gt; 
 &lt;mat-divider&gt;&lt;/mat-divider&gt; 
 &lt;mat-list-item class="no-wrap" *ngIf="position &amp;&amp; company"&gt; {{position}} at {{company}} &lt;/mat-list-item&gt;
 &lt;div class="gap"&gt;&lt;/div&gt; 
 &lt;mat-list-item class="no-wrap"&gt;
 &lt;mat-icon&gt;email&lt;/mat-icon&gt;
 &lt;span class="email"&gt; {{email}} &lt;/span&gt;
 &lt;/mat-list-item&gt;
 &lt;/mat-list&gt;
</code></pre>

I tried to achieve my goal with the following CSS:

component.css:

<pre><code>.no-wrap {
 word-wrap: break-word;
 white-space: pre-wrap;
}
</code></pre>

However, this doesn't work.

How can I prevent the items of an angular material list from wrapping the text they contain?

Angular Material List: How to prevent mat-list-items from wrapping content?

在我的Angular Material应用程序中，我有一个包含多行(mat- list -item)的列表(mat-list)。我试图阻止mat-list-item包装它们的内容。例如，而不是这样： IT架构师在通用电气它应该看起来像这样：通用电气的 IT架构师下面是html：component.html：<mat-l...

问Angular Material List:如何防止mat-list-items包装内容？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular Material List:如何防止mat-list-items包装内容？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular Material List:如何防止mat-list-items包装内容？
EN