반응형
두 줄의 텍스트 오버플로 줄임표
CSS 규칙의 조합을 사용하여 넘칠 때 텍스트를 줄임표(...)로 끝낼 수 있다는 것을 알고 있습니다(부모의 경계에서 벗어남).
동일한 효과를 달성하는 것이 가능합니까(자유롭게 아니오라고 말하십시오), 그러나 텍스트를 두 줄 이상으로 묶어야 합니까?
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
보시다시피, 텍스트는 div의 너비보다 넓을 때 생략형으로 끝납니다.그러나 텍스트를 두 번째 줄로 묶고 계속할 수 있는 충분한 공간이 있습니다.이 작업은 다음에 의해 중단됩니다.white-space: nowrap그것은 타원이 작동하는 데 필요합니다.
아이디어 있어요?
추신: JS 솔루션은 없고, 가능하면 순수한 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 .
h2 {
display: -webkit-box;
max-width: 400px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>이 기사를 보신 적이 있는지는 모르겠지만, Chris Coyier의 훌륭한 CSS-Tricks.com 은 얼마 전에 이 링크를 게시했고 그것은 당신이 원하는 것을 정확히 달성하는 순수한 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);
}<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 솔루션이 된다는 것은 그것도 꽤 복잡한 솔루션이라는 것을 의미하지만, 깔끔하고 우아하게 작동합니다.Javascript를 사용하면 훨씬 더 쉽게 달성할 수 있기 때문에 Javascript는 불가능하다고 생각합니다.
추가적으로, 다운로드 가능한 전체 프로세스의 zip 파일(모든 프로세스를 이해하고 싶다면)이 있을 뿐만 아니라 SAS 혼합 파일도 있어 쉽게 프로세스에 접을 수 있습니다.
이것이 도움이 되길 바랍니다!
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
위가 작동하지 않는 경우 사용
display: -webkit-box;
max-width: 100%;
margin: 0 auto;
-webkit-line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
아래의 CSS들이 그 묘기를 부려야 합니다.
두 번째 줄 다음에 텍스트에...이 포함됩니다.
line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
두 개의 클래스를 결합하는 것이 더 우아해 보입니다.떨어뜨릴 수 있습니다.two-lines하나의 행만 필요한 경우 클래스:
.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>내 솔루션은 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 */
}
나의 각진 앱에서 다음 스타일은 두 번째 줄의 텍스트가 넘쳐나는 것에 대한 생략형을 달성하는 데 도움이 되었습니다.
<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>
누군가에게 도움이 되길 바랍니다.
scss에서 일하는 사람들을 위해, 당신은 추가해야 합니다.!autoprefixer주석의 시작 부분으로 이동하여 사후 처리를 위해 보존합니다.
저는 그 문제에 직면했고 그래서 여기에 게시하는 것입니다.
line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
스택 오버플로우에서 본 답변을 바탕으로 다음 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;
}
당신은 줄임말, 순수한 CSS 대신 용해된 아웃 효과를 사용할 수 있으며 더 전문적으로 보입니다.
<div style="width: 293px; height:48px; overflow: hidden; ">
More than two line of text goes here-More than two line of text goes here
</div>
<div style="position: relative; top: -24px; width: 293px; height:24px;
background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
</div>
여기서 저는 당신의 배경색이 흰색이라고 가정했습니다.
모든 사람이 원하는 결과가 다를 수 있다는 것을 알기 때문에 이것이 저에게 맞는 솔루션입니다.
display: -webkit-box;
min-height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625; /* as per desire */
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;
라인클램프와 라인하이트 두 작품의 조합을 찾았습니다 :D
다음은 마한 라메이의 제안에 기초한 재료 UI 빛바랜 텍스트 효과입니다.
Create the overlay styleconst useStyles = makeStyles((theme) =>
createStyles({
fadeText: {
background: `linear-gradient( 180deg, #FFFFFF00, 0%, #FFFFFF06 30%, #FFFFFFFF 100%)`,
pointerEvents: "none",
}
})
)
<Grid container justify="center">
<Grid item xs={8} sm={6} md={4}>
<Box>
<Box
component="div"
overflow="hidden"
display="flex"
flexDirection="column"
fontFamily="Roboto"
fontSize="body1.fontSize"
fontWeight="fontWeightLight"
textAlign="justify"
height={['8rem']}
>
<Box display="flex">
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.
</Box>
</Box>
<Box
className={classes.fadeText}
display="block"
position="relative"
top="-4rem"
height="4rem"
/>
</Box>
</Grid>
</Grid>
작업 데모:코드 및 상자
색상(MUI 기본테약마어다 CSS 니합용사상색)을 사용합니다.#FFF따라서 현재 테마를 기준으로 그라데이션을 설정하려면 그라데이션을 전체 6자 변형으로 재정의해야 합니다.
예: 용사를 theme기울기 설정(예: 명암 테마 기준):
const useStyles = makeStyles((theme: Theme) =>
createStyles({
fadeText: {
background: `linear-gradient( 180deg, ${theme.palette.background.paper}00 0%, ${theme.palette.background.paper}06 30%, ${theme.palette.background.paper}FF 100%)`
}
})
)
편집: 토니 보그다노프의 제안을 포함하도록 업데이트됨
이것은 완전한 해킹이지만 효과가 있습니다.
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;
}
문제가 있긴 한데...어색하게 편지가 끊어질 수도 있고, 응답하는 사이트에서 이상한 결과를 가져올 수도 있습니다.
다음은 jQuery를 사용하여 줄임표를 관리하는 간단한 스크립트입니다.요소의 실제 높이를 검사하고 숨겨진 원래 노드와 잘린 노드를 만듭니다.사용자가 클릭하면 두 버전 간에 전환됩니다.
큰 이점 중 하나는 예상대로 "ellipsis"가 마지막 단어에 가깝다는 것입니다.
순수한 CSS 솔루션을 사용하는 경우 세 개의 점은 마지막 단어에서 멀어 보입니다.
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>당신의 목표가 무엇인지 확실하지 않지만, 당신은 텍스트가 두 번째 줄에 오기를 원합니까?
여기 jsFiddle이 있습니다. http://jsfiddle.net/8kvWX/4/ 에서 다음 항목을 제거했습니다.
white-space:nowrap;
이것이 당신이 찾고 있는 것인지 아닌지 확신할 수 없습니다.
안부 전해요,
미
언급URL : https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines
반응형
'programing' 카테고리의 다른 글
| 데이트 시간(2008-09-01 12:35:45)의 정규식 패턴은 무엇입니까? (0) | 2023.07.30 |
|---|---|
| 이 문제를 해결하기 위해 복잡한 선택 쿼리가 있습니까? (0) | 2023.07.30 |
| Oracle에 여러 행 삽입 (0) | 2023.07.30 |
| Oracle Jinitator 버전이 너무 낮음 (0) | 2023.07.30 |
| Angular 5의 헤더에 CORS 요청을 추가하는 방법 (0) | 2023.07.30 |