Question

我有一排宽度为400px的行，其中包含两个p标签。一个是公司名称，另一个是职位名称。使用p和text-overflow: ellipsis;缩短了min-width标签。一切正常。

我的问题是：

如果2个p标签文本太长，则2个标签宽度必须相同
如果第一个标签名称太长而第二个标签短，则第二个标签采用该文本的宽度，第一个标签采用最大宽度。

.flex-container-text {
  display: flex;
  width: 400px;
}

.position-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  max-width: 100px
}

.company-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  flex-grow: 3;
  max-width: 100px
}

<div class="flex-container-text">
  <p class="position-name">Position Name Position Name</p>
  <p class="company-name">company Name</p>
</div>

Answer 1

您是说您希望两个元素具有相同的行为，所以我建议只定义一个类。我添加了红色边框，以便您可以轻松看到元素的宽度。添加width：auto和display：inline块可以告诉元素与内容一样宽，直到最大宽度。现在，您可以使用最大宽度了。

<div class="flex-container-text">
  <p class="position-name">Position Name Position Name</p>
  <p class="company-name">company Name</p>
</div>

<ContentPage.Content>
        <AbsoluteLayout BackgroundColor="White" x:Name="Parent">
            <Grid BackgroundColor="Red" AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional" 
                     AbsoluteLayout.LayoutBounds="0,0,1,180"/>
            <Grid x:Name="KeypadGrid" BackgroundColor="Orange">

            </Grid>
        </AbsoluteLayout>
    </ContentPage.Content>

如何扩展缩短的p标签文本取决于下一个p标签？

1 个答案: