2017-01-15 8 views
0

У меня есть два чувствительных divs, один с изображением и один с текстом, оба из которых имеют 66,6% высоты их ширины. Но мне нужно вырезать текст чистым, поэтому не будет, как половина строки. Это возможно сделать с чистым css, а с js?css горизонтальный текст резки

here is what I dont want

мой код:

.head_news { 
 
\t width: 100%; 
 
\t overflow: auto; 
 
} 
 

 
.head_news .image { 
 
\t width: 45%; 
 
\t float: left; 
 
\t margin-right: 5%; 
 
} 
 

 
.head_news .image .auto_height { 
 
\t height: 0px; 
 
\t padding-bottom: calc(100%/1.5); 
 
\t overflow:hidden; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 50% 50%; 
 
\t opacity: 1; 
 
\t -webkit-transition: opacity 0.25s; 
 
    transition: opacity 0.25s; 
 
} 
 

 
.head_news .text { 
 
\t width: 45%; 
 
\t float: left; 
 
} 
 

 
.head_news .text .auto_height { 
 
\t height: 0px; 
 
\t padding-bottom: calc(100%/1.5 - 2%); 
 
\t overflow:hidden; 
 
\t font-size: 14pt; 
 
} 
 

 
.head_news .text .auto_height h2 { 
 
\t font-size: 18pt; 
 
}
<div class='head_news'> 
 
\t \t \t <div class='image'> 
 
\t \t \t \t <div class='auto_height' style='background-image: url(http://random-international.com/wp-content/uploads/2012/10/RR-home-img2.jpg);'></div> 
 
\t \t \t </div> 
 
\t \t \t <div class='text'> 
 
     <div class='auto_height'> 
 
     <h2> 
 
\t \t \t \t \t Some random title of unknown lenght 
 
\t \t \t </h2> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nulla pulvinar eleifend sem. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nullam rhoncus aliquam metus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Aliquam erat volutpat. Nulla quis diam. Curabitur vitae diam non enim vestibulum interdum. Pellentesque arcu. Nulla quis diam. Duis viverra diam non justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean placerat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. 
 
     </div> 
 
     </div> 
 
\t \t </div>

+0

Что вы имеете в виду, вырезав текст чистым. можете ли вы добавить скриншот желаемого поведения? – ab29007

+0

@kittyCat Я добавил пример того, чего я не хочу – nacelnikpohodar

+0

Отметьте сообщение. Я думаю, это поможет вам. [check it out] (http://stackoverflow.com/questions/3220812/css-can-you-prevent-overflow-hidden-from-cutting-off-the-last-line-of-text) – Nimish

ответ

0

вы можете использовать простой CSS

overflow:scroll; 

или просто соответствовать размеру шрифта.

+0

Я хочу вырезать текст, а не прокручивать, также не могу сопоставить размер шрифта , потому что сайт реагирует. – nacelnikpohodar