두 줄의 텍스트 오버플로 줄임표
CSS 규칙 조합을 사용하여 오버플로 할 때 (부모 경계를 벗어날 때) 줄임표 (...)로 텍스트를 끝낼 수 있다는 것을 알고 있습니다.
동일한 효과를내는 것이 가능하지만 (아니오라고 말 하셔도됩니다.) 텍스트를 한 줄 이상으로 줄 바꿈 할 수 있습니까?
여기에 데모가 있습니다.
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
보시다시피 텍스트가 div의 너비보다 넓어지면 줄임표로 끝납니다. 그러나 텍스트를 두 번째 줄에서 줄 바꿈하고 계속 진행할 수있는 충분한 공간이 있습니다. 이 white-space: nowrap작업은 줄임표가 작동하는 데 필요한에 의해 중단됩니다 .
어떤 아이디어?
추신 : JS 솔루션이 없습니다. 가능하면 순수한 CSS입니다.
나는 확실히 당신이 본 경우 아니에요 본을 하지만, 크리스 Coyier의 우수한 CSS-Tricks.com이 잠시 뒤로 링크를 게시 정확히 당신이 무엇을 추구 수행 순수 CSS의 솔루션입니다.
HTML :
<div class="ellipsis">
<div>
<p>
Call me Ishmael. Some years ago – never mind how long precisely – having
little or no money in my purse, and nothing particular to interest me on
shore, I thought I would sail about a little and see the watery part of the
world. It is a way I have of driving off the spleen, and regulating the
circulation. Whenever I find myself growing grim about the mouth; whenever it
is a damp, drizzly November in my soul; whenever I find myself involuntarily
pausing before coffin warehouses, and bringing up the rear of every funeral I
meet; and especially whenever my hypos get such an upper hand of me, that it
requires a strong moral principle to prevent me from deliberately stepping
into the street, and methodically knocking people's hats off – then, I account
it high time to get to sea as soon as I can.
</p>
</div>
</div>
CSS :
html,body,p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA;
}
.ellipsis:before {
content: "";
float: left;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 3em;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
background: -webkit-gradient(linear,left top,right top,
from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
}
물론 순수한 CSS 솔루션이라는 것은 매우 복잡한 솔루션이라는 것을 의미하지만 깨끗하고 우아하게 작동합니다. Javascript를 사용하면 훨씬 쉽게 달성 할 수 있고 (아마도 더 분해 될 수 있기 때문에) Javascript가 문제가되지 않는다고 가정합니다.
추가 보너스로 전체 프로세스의 다운로드 가능한 zip 파일 (모든 것을 이해하려는 경우)이 있지만 SASS mixin 파일도있어 프로세스에 쉽게 접을 수 있습니다.
도움이 되었기를 바랍니다!
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
쉬운 CSS 속성이 트릭을 할 수 있습니다. 다음은 3 줄 줄임표입니다.
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
이 순수한 CSS 버전을 살펴보십시오 : http://codepen.io/martinwolf/pen/qlFdp
display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;
아래 CSS가 트릭을 수행해야합니다.
두 번째 줄 뒤에는 텍스트에 ...
line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
내 솔루션은 amcdnl 중 하나를 재사용하지만 대체 텍스트 컨테이너의 높이를 사용하는 것으로 구성됩니다.
.my-caption h4 {
display: -webkit-box;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;/* Fallback for non-webkit */
}
stackoveflow에서 본 답변을 바탕 으로이 LESS 믹스 인을 만들었습니다 ( 이 링크를 사용하여 CSS 코드 생성 ).
.max-lines(@lines: 3; @line-height: 1.2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
line-height: @line-height;
max-height: @line-height * @lines;
}
용법
.example-1 {
.max-lines();
}
.example-2 {
.max-lines(3);
}
.example-3 {
.max-lines(3, 1.5);
}
몇 줄로 제한하면 거의 모든 브라우저에서 작동하지만 Firefox 및 IE에서는 줄임표 (점 3 개)가 표시되지 않습니다. 데모-http: //jsfiddle.net/ahzo4b91/1/
div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 36px;
max-height: 18px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
라인 클램프와 라인 높이 작업의 콤보를 찾았습니다.
Here is a simple script to manage the ellipsis using jQuery. It inspects the real height of the element and it creates a hidden original node and a truncated node. When the user clicks it switches between the two versions.
One of the great benefits is that the "ellipsis" is near the last word, as expected.
If you use pure CSS solutions the three dots appears distant from the last word.
function manageShortMessages() {
$('.myLongVerticalText').each(function () {
if ($(this)[0].scrollHeight > $(this)[0].clientHeight)
$(this).addClass('ellipsis short');
});
$('.myLongVerticalText.ellipsis').each(function () {
var original = $(this).clone().addClass('original notruncation').removeClass('short').hide();
$(this).after(original);
//debugger;
var shortText = '';
shortText = $(this).html().trim().substring(0, 60) + '...';
$(this).html(shortText);
});
$('.myLongVerticalText.ellipsis').click(function () {
$(this).hide();
if ($(this).hasClass('original'))
{
$(this).parent().find('.short').show();
}
else
{
$(this).parent().find('.original').show();
}
});
}
manageShortMessages();div {
border:1px solid red;
margin:10px;
}
div.myLongVerticalText {
height:30px;
width:450px;
}
div.myLongVerticalText.ellipsis {
cursor:pointer;
}
div.myLongVerticalText.original {
display:inline-block;
height:inherit;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myLongVerticalText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada.
Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt.
</div>
<div class="myLongVerticalText">
One Line Lorem ipsum dolor sit amet.
</div>
</body>It seems more elegant combining two classes. You can drop two-lines class if only one row need see:
.ellipse {
white-space: nowrap;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.two-lines {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
}
.width{
width:100px;
border:1px solid hotpink;
} <span class='width ellipse'>
some texts some texts some texts some texts some texts some texts some texts
</span>
<span class='width ellipse two-lines'>
some texts some texts some texts some texts some texts some texts some texts
</span>In my angular app the following style worked for me to achieve ellipsis on the overflow of text on the second line:
<div style="height:45px; overflow: hidden; position: relative;">
<span class=" block h6 font-semibold clear" style="overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 20px; /* fallback */
max-height: 40px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;">
{{ event?.name}} </span>
</div>
Hope it helps someone.
This is a total hack, but it works:
div {
width: 30%;
float: left;
margin-right: 2%;
height: 94px;
overflow: hidden;
position: relative;
}
div:after {
display: block;
content: '...';
width: 1em;
height: 1.5em;
background: #fff;
position: absolute;
bottom: -6px;
right: 0;
}
It does have problems.... it might cut off a letter awkwardly, and it will probably have some weird results on a responsive site.
Not sure what your target is, but do you want the text to come on the second line?
Here is your jsFiddle: http://jsfiddle.net/8kvWX/4/ just removed the following:
white-space:nowrap;
Im not sure if this is what your are looking for or not.
Regards,
Mee
참고URL : https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines
'program story' 카테고리의 다른 글
| Android로 임의의 톤 연주 (0) | 2020.09.14 |
|---|---|
| Scala를위한 좋은 수학 / 통계 라이브러리가 있습니까? (0) | 2020.09.14 |
| AngularJS는 양식이 컨트롤러에서 유효한지 확인합니다. (0) | 2020.09.14 |
| 섀도우 루트 란? (0) | 2020.09.14 |
| ESB 란 무엇이며 어떤 장점이 있습니까? (0) | 2020.09.14 |