Programing

두 번째 줄의 CSS 줄임표

crosscheck 2020. 5. 21. 20:35
반응형

두 번째 줄의 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(신규) 및 max-lines(신규)를 사용하여 순수한 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');
}

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

두 줄을 넘어서게 할 수 없다는 것이 부끄러운 일입니다! 요소가 표시 블록이고 높이가 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 입니다.

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

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

이전에 jQuery-condense-plugin 을 사용했지만 원하는 것을 할 수있는 것처럼 보입니다. 그렇지 않은 경우 필요에 따라 다른 플러그인 이 있습니다.

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

여기 에 순수한 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>

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

이전 에이 문제를 만났으며 순수한 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 (코드 펜 버전)

줄임표로 여러 줄 텍스트를 자르는 순수한 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;
}

웹킷에서 작동하는 -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>

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

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

이 작업을 수행하는 쉬운 방법은 없습니다. 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/

참고 URL : https://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line

반응형
저작자표시

'Programing' 카테고리의 다른 글

IGrouping에서 값을 얻는 방법  (0) 2020.05.21
클래스의 JavaScript 클릭 이벤트 리스너  (0) 2020.05.21
데이터베이스에서 연결 문자열을 얻는 방법  (0) 2020.05.21
약한 유형의 언어와 관련하여 명백한 모순에 대해 설명하기  (0) 2020.05.21
빈 슬라이스를 초기화하는 올바른 방법  (0) 2020.05.21

'Programing'의 다른글

  • 현재글두 번째 줄의 CSS 줄임표

관련글

댓글

티스토리툴바