두 번째 줄에 있는 대소문자 생략

두 번째 줄에 있는 대소문자 생략

text-overflow: ellipsis두 번째 줄에서, 이것이 가능합니까?인터넷에서 찾을 수가 없어요.

예:

제가 원하는 것은 다음과 같습니다.

I hope someone could help me. I need 
an ellipsis on the second line of...

하지만 지금 일어나고 있는 일은 다음과 같습니다.

I hope someone could help me. I ... 

이것은 웹킷 브라우저에서 작동해야 합니다.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

브라우저 지원

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

* { font-family: verdana; }

<div>
   The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display  property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
</div>

에 대한 요구 text-overflow: ellipsis;의 한 줄 입니다.white-space(pre,nowrap등). 즉, 텍스트가 두 번째 줄에 도달하지 않습니다.

에르고. 순수 CSS에서는 불가능합니다.

제가 방금 똑같은 것을 찾고 있었을 때의 출처: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT 좋은 CSS 신들이 http://www.w3.org/TR/css-overflow-3/ #max-lines를 구현한다면 우리는 순수한 CSS에서 이것을 위험에 빠뜨릴 수 있습니다.fragments 및 (신규) »max-lines(새로 추가됨). 또한 http://css-tricks.com/line-clampin/ 에서 추가 정보를 확인할 수 있습니다.

EDIT 2 WebKit/Blink에는 다음이 있습니다.-webkit-line-clamp: 2두 번째 줄에 줄임표를 넣을 것입니다.

이를 지원하는 브라우저(대부분의 최신 브라우저)에는 라인 클램프를 사용하고 이전 브라우저에는 한 줄로 다시 이동합니다.

  .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

브라우저 지원

나는 스키프의 대답이 충분하지 않다는 것을 알았고 필요로 했습니다.overflow스타일도:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

다른 사람들이 이미 대답했듯이, 순수한 CSS 솔루션은 존재하지 않습니다.매우 사용하기 쉬운 jQuery 플러그인이 있는데, 이 플러그인을 닷닷이라고 합니다.컨테이너의 너비와 높이를 사용하여 잘라내고 타원을 추가해야 하는지 여부를 계산합니다.

$("#multilinedElement").dotdotdot();

여기 jsFiddle이 있습니다.

이 CSS 속성을 사용해서 줄의 줄임말을...

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;

여기서-webkit-line-clamp: 3;다음 행(3개의 행)의 개수입니다. 그 다음에 ...드라마들.

만약 누군가가 SAS/SCSS를 사용하고 있고 이 질문에 답하지 못한다면 - 아마도 이 믹스인이 도움이 될 것입니다.

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

웹킷 브라우저에 줄임표만 추가됩니다.휴식은 그냥 그것을 끊습니다.

플렉스 박스에서 라인 클램프를 작동시키려고 하는 사람이 있다면, 특히 긴 단어로 고문 테스트를 할 때는 조금 더 까다롭습니다.이 코드 스니펫의 유일한 실질적인 차이점은min-width: 0;및 잘린텍가유연항목에서한포함된트스▁cont▁in▁the서▁item항에목,▁flex▁andword-wrap: break-word;https://css-tricks.com/flexbox-truncated-text/ 에서 유용한 정보를 얻을 수 있습니다.고지 사항: 이 답변을 작성할 당시에는 Chrome 외부에서 브라우저 지원이 제대로 이루어지지 않았습니다.하지만, 그 이후로 상황이 개선되었을 수도 있습니다.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (코드펜 버전)

저는 JS 전문가는 아니지만, 당신이 할 수 있는 몇 가지 방법을 알아냈습니다.

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

그런 다음 jQuery를 사용하여 특정 문자 수로 잘라내지만 마지막 단어는 다음과 같습니다.

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

결과는 다음과 같습니다.

로렘 입섬돌이나 자리에 앉기, 콩세투라 디핑엘리트. 주
요소 결과 토르토레…

또는 다음과 같은 특정 문자 수로 간단히 자를 수 있습니다.

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

결과는 다음과 같습니다.

로렘 입섬돌이나 자리에 앉기, 콩세투라 디핑엘리트. 주
요소 결과 토터 등이 모드입니다.

조금이나마 도움이 되길 바랍니다.

여기에 jsFiddle이 있습니다.

두 줄을 넘어 작동할 수 없다니 정말 유감입니다!요소가 디스플레이 블록이고 높이가 2em 또는 무엇인가로 설정되어 있고, 텍스트가 넘칠 때 생략 부호를 표시하면 멋질 것입니다!

단일 라이너의 경우 다음을 사용할 수 있습니다.

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

여러 줄의 경우 github http://pvdspek.github.com/jquery.autoellipsis/ 에 있는 jQuery autoellipsis와 같은 폴리필을 사용할 수 있습니다.

여기 순수한 css의 좋은 예가 있습니다.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

저는 jQuery-condensity-plugin을 사용한 적이 있는데, 이것은 당신이 원하는 것을 할 수 있을 것처럼 보입니다.그렇지 않은 경우 사용자의 필요에 맞는 다양한 플러그인이 있습니다.

편집: 데모를 만들었습니다 - 마법을 하는 데모에서 jquery.condense.js를 연결했으므로 플러그인의 저자에게 전적으로 신뢰합니다 :)

Sass 도우미 믹스인:

은 Sass와 같 은 기 를 사 용 하 는 사 들 다 은 람 있 같 다 니 습 수 할 사 용 를 기 혼 합 가 전 진 택 선 처 은 리 매 변 를 수 개 음적과 ▁called in ▁parameter ▁mix ▁sass ▁optional cessor ▁with ▁an ▁for ▁sass ▁a ▁have ▁you ▁could ▁a ▁who ▁like 다 ▁are 있 , 니 ▁using lines기본값은 1이며, 이를 통해 요소에 텍스트 잘라내기를 적용하고 필요할 때 줄 수를 변경할 수 있습니다.

@mixin text-ellipsis($lines: 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    @if ($lines > 1) {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}

용도:

.some-title {
    @include text-ellipsis($lines: 2);
}

타원형으로 여러 줄 텍스트를 트리밍하는 순수한 css 방식

텍스트 컨테이너의 높이를 조정하고 -webkit-line-clamp로 구분하도록 제어선을 조정합니다: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

비표준 CSS이며, 현재 버전의 CSS에서는 다루지 않습니다(파이어폭스는 지원하지 않습니다).대신 JavaScript를 사용해 보십시오.

여기 있는 모든 답은 틀렸습니다. 그들은 중요한 부분, 높이를 놓쳤습니다.

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

나는 이 문제를 전에 만난 적이 있고, 순수한 css 솔루션은 없습니다.

그것이 제가 (다른 것들 중에서) 이 문제를 다루기 위해 작은 도서관을 개발한 이유입니다.라이브러리는 문자 수준 텍스트 렌더링을 모델링하고 수행할 수 있는 개체를 제공합니다.예를 들어 텍스트 오버플로를 에뮬레이트할 수 있습니다. 한 줄에 임의의 제한이 있는 생략 부호입니다.

스크린샷, 튜토리얼 및 다운로드 링크에 대한 자세한 내용은 http://www.samuelrossille.com/home/jstext.html 을 참조하십시오.

웹킷에서 작동하는 -webkit-line-delay 기반의 순수한 css 메소드:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

이것을 하는 진짜 쉬운 방법은 없습니다.Clamp.js 라이브러리를 사용합니다.

$clamp(myHeader, {clamp: 3});

Late Reply이지만 html 줄 바꿈도 작동하기 때문에 html + css만 해결할 수 있습니다.그래서 보통 br 요소를 사용하는 것은 나쁜 관행이지만, br로 코멘트를 끊으면 텍스트 오버플로 줄임표는 html 텍스트의 다음 줄에서 시작됩니다.

해결 방법을 찾았지만 텍스트 영역에 맞는 대략적인 문자 길이를 알고 선행 공간에 ...을(를) 결합해야 합니다.

제가 한 방법은 다음과 같습니다.

1. 대략적인 문자 길이(이 경우 200)를 가정하고 텍스트와 함께 함수로 전달합니다.
2. 하나의 긴 문자열을 가질 수 있도록 공간을 분할합니다.
3. jQuery를 사용하여 문자 길이 다음에 첫 번째 "" 공백을 슬라이스합니다.
4. 나머지 ...에 가입합니다.

코드:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

여기 바이올린이 있습니다 - http://jsfiddle.net/GYsW6/1/

언급URL : https://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line