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

У меня есть этот код HTML кодрядный список начальной загрузки многострочного текста прерывания строки

<div class="container"> 
    <div class="row"> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1840309" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Divergent" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1840309" class="movie_title"> 
      Divergent 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=2109248" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Transformers: Age of Extinction" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=2109248" class="movie_title"> 
      Transformers: Age of Extinction 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=2039393" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="The Gambler" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=2039393" class="movie_title"> 
      The Gambler 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=2908446" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Insurgent" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=2908446" class="movie_title"> 
      Insurgent 
      </a> 
      <div class="movie_year"> 
       2015 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1399103" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Transformers: Dark of the Moon" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1399103" class="movie_title"> 
      Transformers: Dark of the Moon 
      </a> 
      <div class="movie_year"> 
       2011 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1620719" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Dabangg" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1620719" class="movie_title"> 
      Dabangg 
      </a> 
      <div class="movie_year"> 
       2010 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1099212" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Twilight" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1099212" class="movie_title"> 
      Twilight 
      </a> 
      <div class="movie_year"> 
       2008 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1259571" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="The Twilight Saga: New Moon" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1259571" class="movie_title"> 
      The Twilight Saga: New Moon 
      </a> 
      <div class="movie_year"> 
       2009 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=2338151" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="PK" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=2338151" class="movie_title"> 
      PK 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=2713180" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Fury" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=2713180" class="movie_title"> 
      Fury 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=2446042" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Taken 3" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=2446042" class="movie_title"> 
      Taken 3 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=3280916" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="The Atticus Institute" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=3280916" class="movie_title"> 
      The Atticus Institute 
      </a> 
      <div class="movie_year"> 
       2015 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1780798" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Clown" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1780798" class="movie_title"> 
      Clown 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1535109" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Captain Phillips" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1535109" class="movie_title"> 
      Captain Phillips 
      </a> 
      <div class="movie_year"> 
       2013 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=0162222" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Cast Away" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=0162222" class="movie_title"> 
      Cast Away 
      </a> 
      <div class="movie_year"> 
       2000 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=0362227" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="The Terminal" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=0362227" class="movie_title"> 
      The Terminal 
      </a> 
      <div class="movie_year"> 
       2004 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=0120363" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Toy Story 2" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=0120363" class="movie_title"> 
      Toy Story 2 
      </a> 
      <div class="movie_year"> 
       1999 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=0808151" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Angels & Demons" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=0808151" class="movie_title"> 
      Angels & Demons 
      </a> 
      <div class="movie_year"> 
       2009 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=0435761" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Toy Story 3" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=0435761" class="movie_title"> 
      Toy Story 3 
      </a> 
      <div class="movie_year"> 
       2010 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1673434" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="The Twilight Saga: Breaking Dawn - Part 2" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1673434" class="movie_title"> 
      The Twilight Saga: Breaking Dawn - Part 2 
      </a> 
      <div class="movie_year"> 
       2012 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=0337692" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="On the Road" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=0337692" class="movie_title"> 
      On the Road 
      </a> 
      <div class="movie_year"> 
       2012 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=2582846" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="The Fault in Our Stars" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=2582846" class="movie_title"> 
      The Fault in Our Stars 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1587310" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Maleficent" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1587310" class="movie_title"> 
      Maleficent 
      </a> 
      <div class="movie_year"> 
       2014 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=0114709" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Toy Story" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=0114709" class="movie_title"> 
      Toy Story 
      </a> 
      <div class="movie_year"> 
       1995 
      </div> 
     </div> 
     </div> 
     <div class="movie_item col-xs-6"> 
     <a href="Movie.php?MovieID=1905041" class="movie_link"> 
      <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/[email protected]_V1_SY255_CR0,0,170,255.jpg" alt="Fast & Furious 6" /></figure> 
     </a> 
     <div class="movie_bottom"> 
      <a href="Movie.php?MovieID=1905041" class="movie_title"> 
      Fast & Furious 6 
      </a> 
      <div class="movie_year"> 
       2013 
      </div> 
     </div> 
     </div> 
    </div> 
</div>

и CSS

body { 
    background: white; 
    text-align: center; 
} 
a { 
    color: #6FA5FD; 
    font-weight: bold; 
} 
/*.movie_title { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    display: block; 
    overflow: hidden 
}*/ 
/*figure { 
    border: 5px solid white; 
    border-radius: 4px; 
}*/ 
.movie_item { 
    margin-bottom: 15px; 
} 
.movie_bottom { 
    margin: 0 auto; 
    padding-left: 5px; 
    max-width: 180px; 
    text-align: left 
} 
.movie_link figure img { 
    max-height:255px; 
} 
@media (max-width: 767px) { 
    .movie_link { 
     display: inline-block; 
     max-width: 180px; 
    } 
    .movie_bottom { 
     font-size: 13px; 
    } 
} 
@media (min-width: 768px) { 
    .movie_item { 
     width: 20%; 
    } 
    .movie_bottom { 
     font-size: 13px; 
    } 
    .img-responsive { 
     width: 110px; 
     height: 165px; 
    } 
} 
@media (min-width: 992px) { 
    .movie_item { 
     width: 25%; 
     padding: 0px 31px; 
    } 
    .img-responsive { 
     width: 170px; 
     height: 255px; 
    } 
    .movie_bottom { 
     font-size: 15px; 
    } 
} 
@media (min-width: 1200px) { 
    .movie_item { 
     width: 20%; 
     padding: 0px 27px; 
    } 
}

это также требует bootstrap.css

Проблема этого кода когда заголовок находится на двух строках, список разбивается ниже этого фильма, это не происходит для последнего элемента в строке, в этом выпуске третьего файла фильма третий трек имеет 2 строки, e пропущенный предмет фильма ниже его отсутствует и сдвинут вправо. что я должен сделать, чтобы преодолеть эту проблему, Примечание: Я не хочу, чтобы скрыть текст (многоточие)

источник

2015-04-04 Syed Talha hai

Проблема в том, что высота вашего плавали дивы разные ... вы можете дать вашим DIVS фиксированную высоту чтобы освободить место для второй строки текста:

.movie_item { 
    height: 220px; 
}

См fiddle.

... или учитывая возможность использования бутстрапа и удаления поплавка на divs. Например, вы можете использовать display: flex; (см. w3 и this guide).

Например, что-то вроде следующего на вашем содержащей DIV:

display: flex; 
flex-wrap: wrap;

См fiddle (.row заменен .wrap, чтобы избежать начальной загрузки стилей).

источник

2015-04-04 12:03:08 pschueller

2-е решение хорошо и принято :) спасибо –

Решение не работает на android –

Возможно, вам придется использовать префикс '-webkit-' для более старых версий Android, см. Http://caniuse.com/#feat= Flexbox. – pschueller

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

ответ

Смежные вопросы