두 번째 줄의 CSS 줄임표

text-overflow: ellipsis두 번째 줄의 CSS 는 가능합니까? 인터넷에서 찾을 수 없습니다.

예:

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

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

그러나 무슨 일이 일어나고 있습니까 :

I hope someone could help me. I ... 

text-overflow: ellipsis;작동 하기위한 요구 사항 은 white-space( pre, nowrap등) 의 한 줄 버전입니다 . 이는 텍스트가 두 번째 줄에 도달하지 않음을 의미합니다.

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

바로 지금 똑같은 것을 찾고있을 때 내 소스 : http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

편집 만약 좋은 CSS 신들이 http://www.w3.org/TR/css-overflow-3/#max-lines 를 구현한다면, fragments(new)와 max-lines(new)를 사용하여 순수한 CSS로 이것을 위험에 빠뜨릴 수 있습니다 . 또한 http://css-tricks.com/line-clampin/ 에 대한 추가 정보

2 편집 WebKit / Blink has line-clamp: -webkit-line-clamp: 2줄임표를 두 번째 줄에 넣습니다.

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

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

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

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

다음은 jsFiddle 입니다.

Skeep의 답변이 충분하지 않으며 overflow스타일도 필요하다는 것을 알았 습니다.

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

누군가 SASS / 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');
}

이것은 웹킷 브라우저에서 줄임표 만 추가합니다. 휴식은 그냥 차단합니다.

지원하는 브라우저 (가장 최신 브라우저)에는 라인 클램프를 사용하고 이전 버전의 경우 한 줄로 넘어갑니다.

  .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;
    }
  }

두 줄을 넘어서게 할 수 없다는 것이 얼마나 부끄러운 일입니까! 요소가 표시 블록이고 높이가 2em 또는 다른 것으로 설정되어 있으면 텍스트가 넘칠 때 줄임표가 표시됩니다.

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

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

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

저는 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);
}

결과는 다음과 같습니다.

Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉아 있습니다. Morbi
elementum 결과 토르 토 외…

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

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

결과는 다음과 같습니다.

Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉아 있습니다. Morbi
elementum 결과 tortor et euismod…

희망이 조금 도움이됩니다.

다음은 jsFiddle 입니다.

여기 에 순수한 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를 - 응축 - 플러그인 전에, 당신이 원하는 것을 할 수있는 것 같습니다. 그렇지 않은 경우 필요에 따라 다른 플러그인 이 있습니다.

편집 : 당신에게 데모를 만들었 습니다 -jquery.condense.js 를 마술을하는 데모에 링크 했으므로 해당 플러그인의 저자에게 완전히 신용합니다 :)

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

줄임표로 여러 줄 텍스트를 자르는 순수한 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 솔루션은 없습니다.

그렇기 때문에이 문제를 다루기 위해 작은 라이브러리를 개발했습니다 (다른 것들 중에서). 라이브러리는 문자 수준의 텍스트 렌더링을 모델링하고 수행 할 수있는 개체를 제공합니다. 예를 들어 임의의 제한을 가진 텍스트 오버플로 줄임표 (한 줄은 필요하지 않음)를 에뮬레이션 할 수 있습니다.

스크린 샷, 튜토리얼 및 dowload 링크 는 http://www.samuelrossille.com/home/jstext.html 을 참조하십시오 .

flexbox 에서 작동하도록 라인 클램프를 얻으려는 사람은 조금 까다 롭습니다. 특히 긴 단어로 고문 테스트를 한 경우 특히 그렇습니다. 이 코드 스 니펫의 유일한 차이점은 min-width: 0;잘린 텍스트가 포함 된 flex 항목과 word-wrap: break-word;입니다. 통찰력을 얻기 위해 https://css-tricks.com/flexbox-truncated-text/에 대한 팁 . 면책 조항 : 이것은 여전히 ​​내가 아는 한 웹킷입니다.

.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 (코드 펜 버전)

여기에있는 모든 대답이 잘못되었습니다. 중요한 부분이 누락되었습니다. 높이

.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>

웹킷에서 작동하는 -webkit-line-clamp의 순수한 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});

해결책을 찾았지만 텍스트 영역에 맞는 대략적인 문자 길이를 알아야합니다 ... 그리고 선행 공간에 조인하십시오.

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

1. 대략적인 문자 길이 (이 경우 200)를 가정하고 텍스트와 함께 함수에 전달
2. 하나의 긴 줄을 갖도록 공백을 나눕니다.
3. jQuery를 사용하여 문자 길이 다음에 첫 번째 ""공백을 슬라이스하십시오.
4. 나머지는 가입 ​​...

코드 :

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

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