html - css 垂直对齐文本居中并 overflow hidden

Question

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

如您所见，左侧的文本不是垂直居中对齐的。我搜索了一个答案，我找到的每一个解决方案都让左边的垂直居中对齐，给第一个带来了麻烦，就像在这种情况下，右边的 div 的文本从一开始就没有显示(“***这是我的描述..."):

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

在 label 中添加一个 span 并给它一个 max-height 和 overflow: hidden，并且对于描述，您在 report-card-text

上设置了 max-height/ overflow: hidden

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  */
}

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

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