Question

我在循环中渲染div。每个div都有一个文本（可能很长 - 这意味着溢出：需要隐藏。）

如您所见，左侧的文字不是垂直对齐的中间。我搜索了一个答案，我发现的每个解决方案都使左边的一个垂直对齐中间，给第一个问题造成了麻烦，就像在这种情况下，右边div的文本没有从开始显示（＆＃34; ** *这是我的设计...＆＃34;）：

html代码是：

<div class="js-recent-item recent-item" data-view-url="{{url}}">
    {{#if isReport}}
    <label class="report-card-title" title="{{title}}">{{title}}</label>
    <div class="no-sides-padding report-container">
    <div class="report-card-text Aligner" title="{{description}}">{{description}}</div>
 </div>
 {{/if}}
</div>

css：

.report-card-text {
  font-size: 12px;
  padding: 10px;
  text-align: center;
  line-height: 18px;
  height: 100px;
  overflow: hidden;
}

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.Aligner-item {
  max-width: 50%;
}
.Aligner-item--top {
  align-self: flex-start;
}
.Aligner-item--bottom {
  align-self: flex-end;
}

我试图用flexbox和table-cell解决这个问题并且没有成功。我很乐意得到你的建议。

谢谢，艾拉。

**************更新：解决方案：*********************

 {{#if isReport}}
                                                <label class="report-card-title" title="{{title}}">{{title}}</label>
                                                <div class="report-container">
                                                    <div class="report-card-text" title="{{description}}">{{description}}</div>
                                                </div>
                                            {{/if}}

CSS：

    .report-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 122px;
    margin-top: -6px;
    overflow: hidden;
}

.report-card-text{
    .card-text;
    padding : 5px 10px;
    text-align: center;
    line-height: 23px;  
    max-height: 100%;
}

Answer 1

在span中添加label并为其提供max-height和overflow: hidden，并为说明设置max-height / {{1}在overflow: hidden

上

report-card-text

body {
  display: flex;
}

.js-recent-item {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.report-card-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 26px;
  border: 1px solid black;
}
.report-card-title span {
  max-height: 50px;
  overflow: hidden;
}

.report-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150px;
  font-size: 26px;
  border: 1px solid black;
}
.report-card-text {
  max-height: 100%;
  overflow: hidden;   /*  use "auto" if to be able to scroll  */
}

css垂直对齐文本中间与溢出隐藏

1 个答案: