Question

我正在研究这个例子： https://jsbin.com/bujogekaso/edit?html,css,output 试图截断标题，命名链接和描述。

overflow: hidden;
width: 35%;
text-overflow: ellipsis;
white-space: nowrap;

我不需要任何包装。我只希望文本被截断以适合主框内的一行。我已经尝试了很多解决方案，但没有任何运气。

Answer 1

请确保添加display: block或display: inline-block使其正常工作。内联元素不能截断文本或更改宽度。

试一下：

.desc {
    display: block;
    width: 35%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 2

将float:left分配给.desc类将包装元素。

.box .box-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


.box-body {
  font-size: 14px;
}


.box__img {
  flex-basis: 15%;
}


.box__meta {
  flex-basis: 80%;
  margin-left: 15px;
}


.box {
  border: 1px solid;
  padding: 10px;

}

.thumbnail {
    width: 150px;
    min-width: 45%;
    min-height: 100px;
  }


h3 {
    font-size: 15px;
    margin: 0px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
  
}

img {
  vertical-align: middle;
}

a {
    overflow: hidden;
    width: 35%;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.desc {
    overflow: hidden;
    width: 35%;
    text-overflow: ellipsis;
    white-space: nowrap;
    float:left;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="box">
  <div class="box-body">
    <div class="box__img">
  <img src="https://via.placeholder.com/400x339" class="thumbnail">
</div>

<div class="box__meta">
  <h3>heade header header header header</h3>
  <a href="#" target="_blank" rel="nofollow noopener"><bdi><i class="fa fa-external-link"></i> foobarfoobarfoobarfoobarfoobarfoobarfoobarfoobar</bdi></a>
  <p><bdi class="desc">foobar foo bar foo bar foo foo bar foo foo foo bar bar foo foo foo foo foo foo foo bar bar bar bar</bdi></p>
</div>

  </div>
  <div style="clear: both"></div>
</div>
</body>
</html>

我无法使文本溢出来工作索引div容器

2 个答案: