Я не могу создать переполнение текста для работы с индексом div контейнера

#css

Вопрос:

Я работаю над этим примером: https://jsbin.com/bujogekaso/edit?html ,css, выводит попытку усечения заголовка, именованной ссылки и описания.

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

Я не хочу никакого переноса. Я просто хочу, чтобы текст был усечен, чтобы поместиться в одну строку внутри основного поля.
Я пробовал много решений, но безуспешно.

Ответ №1:

Убедитесь, что вы добавили либо display: block или display: inline-block , чтобы это работало. Встроенные элементы не могут усекать текст или изменять ширину.

Попробуйте:

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

1. Спасибо. Я думал, что смогу получить полный текст и большую ширину, а затем текст будет усечен, когда поле станет маленьким. Так ли это, как должно быть, или я делаю что-то не так.

Ответ №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>

1. Спасибо. Если я применю значение float к h3 и ссылке, тогда заголовок с именем linked и desc будут располагаться рядом.

2. но вы должны добавить float в . класс desc только для предотвращения переполнения

3. Прошу прощения. Я этого не понимаю. Я хотел обрезать все, а не только desc.