flex布局下，white-space遇到的坑

Posted 2023-05-15

参考技术A flex布局下，white-space无效，而且会导致一些乱七八糟的问题，在它的父元素中加入min-width:0 解决问题

<div>

    <span >超出边框测试内容超出边框测试内容超出边框测试内容超出边框测试内容</span>

    <span >超出边框测试内容超出边框测试内容超出边框测试内容超出边框测试内容</span>

</div>

<style>

div

    display:flex;

    min-width:0;//这里必须要，不然下列span设置无效

    span

           overflow:hidden;//超过指定的宽度和高度也隐藏 同时也隐藏子元素

            display: inline-block;//块级元素显示在这一行，不换行，其他块级元素也可以显示在这一行

            white-space: nowrap; 所有的文本都显示在这一行

            text-overflow: ellipsis; 多余的文本用省略号显示

            width:100%;

    

Angular 2 Flex 布局右对齐图标

【中文标题】Angular 2 Flex 布局右对齐图标

【英文标题】：Angular 2 Flex Layout Align Icon Right

【发布时间】：2017-12-30 11:36:55

【问题描述】：

我在使用 Angular Flex 布局对齐项目时遇到问题。

下面的snipper 没有将<md-icon> 对齐到标题的右侧，这是我打算做的。

关于如何实现这一点的任何建议？

<div class="flex-item" fxFlex fxFlexAlign="end end">

<md-card style="background-color:white;">
   <md-card-header style="background-color:white;">
      <md-card-title>Swap Card</md-card-title>
      <div class="flex-item" fxFlex fxFlexAlign="end end">
         <md-icon>add_a_photo</md-icon>
         Icon
      </div>
   </md-card-header>
   <md-card-content>
   </md-card-content>
</md-card>

【参考方案1】：

您可以在两者之间添加一个灵活长度的空跨度：

<md-card>
  <md-card-header>
    <md-card-title>Swap Card</md-card-title>
    <span fxFlex></span>
    <md-icon>add_a_photo</md-icon>
  </md-card-header>
  <md-card-content>
  </md-card-content>
</md-card>

【参考方案2】：

您在正确的轨道上，只需要添加正确的fxFlexAlign 参数。对于您的问题，您将需要。

fxLayoutAlign="end start"

我已经在这个plunker中测试过了。

html:

<md-card style="background-color:white;">
    <md-card-header style="background-color:white;">
        <md-card-title>Swap Card</md-card-title>
          <div class="flex-item" 
               fxFlex fxLayoutAlign="end start">
            <md-icon>add_a_photo</md-icon>
              Icon
          </div>
        </md-card-header>
    <md-card-content>
    </md-card-content>
</md-card>

您还可以使用此documentation example 了解fxLayoutAlign。

【讨论】：

这个是比较合适的答案