html - 如何使用CSS动态分配文本 block ？

Question

我正在使用 ionic 并尝试做这样的事情:

我正在使用 css，如您所见，它可以工作，但是当文本长度不同时，事情会变得很奇怪:

这是我正在使用的 CSS:

.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative;
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em;
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

和我的html

        <div class="row">
          <div class="padding">
            <img src="img/san-francisco.jpg" style="width: 80px; height: 80px; border-radius:5px;" alt="" />
          </div>
          <div class="">
            <div class="news-header block-with-text">
              <h2>{{new.title}}</h2>
            </div>
            <div class="news-summary block-with-text">
              <p>
                {{new.summary}}
              </p>
            </div>
            <div class="row news-footer">
              <div>
                {{new.tags[0]}}
              </div>
              <div>
                {{new.source}}
              </div>
            </div>
          </div>
        </div>

如果标题为 3 行，我想将底部文本限制为 2 行文本，如果标题为 2，我想将其设置为 3 行，关于如何实现这一点有什么想法吗？

Answer 1

I want to make the bottom text limit to 2 lines of text if header is 3 lines, if header is 2 I want to have it 3 lines

编辑这个答案以添加在特定情况下——标题和正文具有相同的行高——这可以在纯 CSS 中完成，方法是将标题和正文文本包装在一个五行高的框中，用 溢出:隐藏:

.row {
  width: 300px;
  line-height: 20px;
  height: 100px;
  overflow:hidden;
  border: 1px solid
}

.news-header {
  font-weight: bold
}

<div class="row">
  <div class="news-header">This head will be two lines long. This head will be two lines long.</div>
  <div class="news-summary">body text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body text</div>
</div>

<div class="row">
  <div class="news-header">This head will be three lines long. This head will be three lines long. This head will be three lines long.</div>
  <div class="news-summary">body text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body text</div>
</div>

这不适合大多数布局；任何更复杂的东西都会让你离开纯 CSS 领域并进入 javascript。我不推荐这样做，它很脆弱，可能需要重新设计，但是:

// depending on jQuery here, obviously.  Put this somewhere that it will run after the regular DOM layout has completed.
$('.news-header').each(function() {
  var LINEHEIGHT=22; // in px.  Adjust as needed to match your css
  if ($(this).height() === (LINEHEIGHT*2)) {
    $(this).next('.news-summary').height(LINEHEIGHT*3);
  } else {
    $(this).next('.news-summary').height(LINEHEIGHT*2);
  };
  // note conspicuous failure to handle 4-line, 1-line, etc headers
});

.row {
  width: 300px;
  line-height: 22px;
  border: 1px solid;
}

.news-header {font-weight: bold;}
.news-summary {overflow: hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="news-header">This head will be two lines long. This head will be two lines long.</div>
  <div class="news-summary">body text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body text</div>
</div>

<div class="row">
  <div class="news-header">This head will be three lines long. This head will be three lines long. This head will be three lines long.</div>
  <div class="news-summary">body text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body textbody text body text</div>
</div>

思路是让标题正常布局，测量它的高度，然后以此为基础设置正文的高度。仅当您为标题和正文都设置了行高时，这才有效——此处两者的行高不必相同，但您需要在计算中考虑两者之间的任何差异.