0
나는 이미지와 텍스트가 포함 된 두 개의 반응 형 div가 있는데, 둘 다 너비가 66.6 %입니다. 하지만 텍스트를 깨끗하게 잘라야하므로 행의 절반이되지 않습니다. js와 함께 evetually 순수한 CSS로 할 수 있습니까?css 가로 텍스트 자르기
내 코드 :
.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>
텍스트를 깨끗하게 자르는 것이 무엇을 의미합니까? 원하는 동작의 스크린 샷을 추가 할 수 있습니까? – ab29007
@kittyCat 내가 원하지 않는 것의 예제를 추가했습니다. – nacelnikpohodar
게시물을 확인하십시오. 나는 그것이 당신을 도울 것이라고 생각합니다. [그것을 확인하십시오] (http://stackoverflow.com/questions/3220812/css-can-you-prevent-overflow-hidden-from-cutting-off-the-last-line-of-text) – Nimish