텍스트 3줄이상이면 ... 처리하고 싶습니다.
본문
현재 코드는 아래처럼 작성을 해서 기능적으로는 구현을 해놨습니다.
텍스트가 3줄이상이 되면 ...처리가 되긴 하는데
현재 크롬 및 엣지에서는 정상적으로 적용이 되는데
익스플로에서는 적용이 되지 않아 여쭤봅니다. 다른방법이 있나 여쭤봅니다. 고수님들 도와주세요.ㅜㅜ
.text-box p{
font-size: 1.6rem;
font-weight: 300;
width: 100%;
height: auto;
line-height: 1.45;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
답변 2
설명보다 예제 소스 드립니다.
나머지 적용은 보고 수정 하시는게 좋을것 같습니다.
다른데서 소스 받아본거라 참고 하세요.
<style type="text/css">
p {
font-size: 26px;
font-family: serif;
}
.line-clamp {
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
position: relative;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 !important;
}
.line-clamp:after {
content: '...';
text-align: right;
bottom: 0;
right: 0;
width: 25%;
display: block;
position: absolute;
height: calc(1em * 1.2);
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
@supports (-webkit-line-clamp: 1) {
.line-clamp:after {
display: none !important;
}
}
.line-clamp-col {
/* -webkit-line-clamp의 라인 숫자 변경 */
-webkit-line-clamp: 3;
/* height의 마지막 숫자 위와 동일하게 변경 */
height: calc(1em * 1.2 * 3);
}
</style>
<p class="line-clamp line-clamp-col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 5 COPY Icon copy red DISCOVER MORE! Take a deep dive and
try our list of over 40 unique generators, find placeholder images for your next design, or add a lorem ipsum plugin to the CMS or text editor of your choice. What is Lorem Ipsum? From its medieval origins to the digital era, learn everything there
</p>
답변을 작성하시기 전에 로그인 해주세요.