sourcecode

CSS를 사용하면 다중 행의 오버플로 블록에 "..."를 사용합니다.

codebag 2023. 8. 6. 10:03

CSS를 사용하면 다중 행의 오버플로 블록에 "..."를 사용합니다.

와 함께

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

오버플로우된 경우 줄의 끝에 표시됩니다.그러나 이는 한 줄에만 표시됩니다.하지만 저는 그것이 여러 줄로 표시되기를 원합니다.

다음과 같이 보일 수 있습니다.

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

또한 이 문제를 다루는 여러 jquery 플러그인이 있지만 여러 줄의 텍스트를 처리하지 않는 플러그인이 많습니다.다음 작업:

몇 가지 수행 테스트도 있습니다.

저는 이것과 비슷한 것을 이룰 때까지 해킹을 해왔습니다.몇 가지 주의 사항이 포함되어 있습니다.

순수한 CSS가 아닙니다. HTML 요소를 몇 개 추가해야 합니다.그러나 JavaScript가 필요하지 않습니다.
줄임표는 마지막 줄에서 오른쪽으로 정렬됩니다.이것은 텍스트가 오른쪽 정렬 또는 정렬되지 않은 경우 마지막으로 표시되는 단어와 생략 부호 사이에 눈에 띄는 간격이 있을 수 있음을 의미합니다(첫 번째 숨겨진 단어의 길이에 따라 다름).
타원형 공간은 항상 예약되어 있습니다.이는 텍스트가 상자에 거의 정확하게 들어맞으면 불필요하게 잘릴 수 있음을 의미합니다(기술적으로는 그렇지 않지만 마지막 단어는 숨겨짐).
텍스트는 배경색이 고정되어 있어야 합니다. 필요 없는 경우 생략 부호를 숨기기 위해 색이 있는 직사각형을 사용하기 때문입니다.

또한 텍스트는 문자 경계가 아닌 단어 경계에서 구분됩니다.이것은 의도적인 것이었지만(길어진 텍스트에 대해 그것이 더 좋다고 생각하기 때문에), 왜냐하면 그것은 무엇과 다르기 때문입니다.text-overflow: ellipsis네, 저는 그것을 언급해야 한다고 생각했습니다.

이러한 주의 사항을 참고할 수 있는 경우 HTML은 다음과 같습니다.

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

그리고 이것은 흰색 배경에 세 줄의 텍스트가 있는 150픽셀 너비의 상자의 예를 사용하여 대응하는 CSS입니다.필요한 경우 마진과 패딩을 0으로 설정하는 CSS 재설정 또는 유사한 설정이 있다고 가정합니다.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

결과는 다음과 같습니다.

image of the rendered result with different text lengths

작동 방식을 명확히 하기 위해, 여기 동일한 이미지가 있습니다. 단,.hidedots1빨간색으로 강조 표시되어 있습니다..hidedots2은 보이지 텍스트가 때 입니다.보이지 않는 텍스트가 없을 때 생략 부호를 숨기는 직사각형은 다음과 같습니다.

the same image as above, except that the helper elements are highlighted in color

IE9, IE8(에뮬레이트), Chrome, Firefox, Safari 및 Opera에서 테스트되었습니다.IE7에서는 작동하지 않습니다.

여기 이것을 논의하는 최근의 css-tricks 기사가 있습니다.

위 기사의 일부 솔루션(여기에 언급되지 않음)은 다음과 같습니다.

1)-webkit-line-clamp에 있는 합니다.

두 방법 모두 다음과 같은 마크업을 가정합니다.

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

대소문자로

.module {
  width: 250px;
  overflow: hidden;
}

-웹킷 줄 바꿈

라인 클램프 FIDDLE(최대 3줄)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

사라지다, 사라지다

라인 높이를 1.2em으로 설정했다고 가정합니다.텍스트 세 줄을 노출하려면 용기 높이를 3.6em(1.2em x 3)으로 하면 됩니다.숨겨진 오버플로는 나머지를 숨길 것입니다.

Fade out FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

솔루션 #3 - @supports를 사용한 조합

우리는 @supports를 사용하여 웹킷 브라우저에서 웹킷의 라인 클램프를 적용하고 다른 브라우저에서 페이드아웃을 적용할 수 있습니다.

@페이드 폴백 피들을 사용하여 선을 긋습니다.

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

아래 링크는 이 문제에 대한 순수한 HTML/CSS 솔루션을 제공합니다.

브라우저 지원 - 기사에 명시된 대로:

지금까지 Safari 5.0, IE 9(표준 모드에 있어야 함), Opera 12 및 Firefox 15에서 테스트했습니다.

레이아웃의 고기가 일반적인 위치, 여백 및 패딩 속성에 있기 때문에 이전 브라우저는 여전히 잘 작동합니다.플랫폼이 이전 버전(예: Firefox 3.6, IE 8)인 경우 이 방법을 사용할 수 있지만 그라데이션을 독립 실행형 PNG 이미지 또는 DirectX 필터로 다시 실행할 수 있습니다.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

CSS:

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: -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); }

html:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; 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 &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

바이올린

(테스트를 위해 브라우저의 창 표시)

텍스트 오버플로에 대해 W3 사양을 검토한 결과, CSS만 사용하는 것은 불가능하다고 생각합니다.엘리프시스는 새로운 특성이라 아마 아직까지 많은 사용이나 피드백을 받지 못했을 것입니다.

하지만 이 남자는 비슷한 (또는 동일한) 질문을 한 것으로 보이며, 누군가 멋진 jQuery 솔루션을 생각해 낼 수 있었습니다.http://jsfiddle.net/MPkSF/ 에서 솔루션을 데모할 수 있습니다.

자바스크립트가 선택사항이 아니라면, 운이 없을 수도 있다고 생각합니다.

완전성을 위해 이 질문에 추가하고 싶습니다.

Opera는 이 -o-ellipsis-last 라인에 대해 비표준 지원을 제공합니다.
닷닷은 제가 추천할 수 있는 훌륭한 jQuery 플러그인입니다.

좋은 질문입니다...답이 있었으면 좋겠지만, 요즘 CSS로 얻을 수 있는 가장 가까운 것은 이것입니다.줄임말은 없지만 그래도 꽤 쓸만합니다.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

저는 꽤 잘 작동하는 이 css(scss) 솔루션을 찾았습니다.웹킷 브라우저에서는 생략 부호를 표시하고 다른 브라우저에서는 텍스트를 잘라냅니다.그것은 제가 의도한 용도에 적합합니다.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

작성자의 예: http://codepen.io/martinwolf/pen/qlFdp

여기에는 많은 답이 있지만 다음과 같은 답이 필요했습니다.

CSS 전용
미래에 대비(시간과의 호환성 향상)
단어를 구분하지 않음(공백만 구분)

경고는 지원하지 않는 브라우저에 줄임표를 제공하지 않는다는 것입니다.-webkit-line-clamp규칙(현재 IE, Edge, Firefox)을 사용하지만 그라데이션을 사용하여 텍스트를 페이드 아웃합니다.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

당신은 이 CodePen에서 그것이 작동하는 것을 볼 수 있고, 여기서 자바스크립트 버전을 볼 수 있습니다(jQuery 없음).

여기 제가 css를 사용하여 얻을 수 있는 가장 가까운 해결책이 있습니다.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

작동 피들(확인할 창 크기 조정)

내 블로그에 링크를 연결하여 설명

업데이트된 피들

나는 이제 어떤 CSS 전문가가 그것을 완벽하게 만드는 방법에 대한 아이디어를 얻었길 바랍니다.:)

이 파티에 조금 늦었지만, 제가 생각하기에, 독특한 해결책이 있습니다.나는 css trickery나 js를 통해 당신 자신의 줄임말을 삽입하려고 하는 것보다, 한 줄만 제한을 두고 굴리는 것을 시도하려고 생각했습니다.그래서 저는 모든 "라인"에 대해 텍스트를 복제하고 음의 텍스트 들여쓰기를 사용하여 마지막 한 줄이 멈추는 곳에서 시작하는지 확인합니다.피들

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

더 자세한 정보는 바이올린에 있습니다.브라우저 리플로우에 문제가 있어서 JS redraw를 사용하고 있으므로 확인해보시기 바랍니다. 하지만 이것이 기본 개념입니다.어떤 생각/제안이든 대단히 감사합니다.

@balpha와 @Kevin 감사합니다, 저는 두 가지 방법을 함께 결합합니다.

이 방법에 필요한 js가 없습니다.

사용할 수 있습니다.background-image점을 숨기기 위해 그라데이션이 필요하지 않습니다.

그innerHTML의.ellipsis-placeholder필요 없어요, 저는 사용합니다..ellipsis-placeholder폭과 높이를 동일하게 유지하기 위해.ellipsis-more사용할 수 있습니다.display: inline-block대신.

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

여기서 더 보기

자바스크립트 솔루션이 더 나을 것입니다.

텍스트의 줄 번호 가져오기
토글is-ellipsis창의 크기 또는 요소가 변경되는 경우 클래스

행 수정 가져오기

Element.getClientRects()이런 식으로 작동합니다.

각 rects는 ▁the다▁each를 가집니다.top값, 그래서 다른 정류들을 찾아보세요.top가치, 이와 같은

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

흘러가다`...more`

이와 같이

창 크기 조정 또는 요소 변경 탐지

이와 같이

자바스크립트 트릭을 찾았는데 문자열의 길이를 사용해야 합니다.너비 250px의 세 줄을 원한다고 가정하면 한 줄당 길이를 계산할 수 있습니다.

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}

-webkit-line-based 기반의 순수한 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>

언급URL : https://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines

'sourcecode' 카테고리의 다른 글

사용자별 Oracle 설정 기본 구성표(세션 변경 안 함) (0)	2023.08.06
스위프트에서 토스트 메시지를 만드는 방법은 무엇입니까? (0)	2023.08.06
phpMyAdmin 오류: mysqli_real_connect(): (HY000/1045):'pma'@'localhost' 사용자에 대한 액세스가 거부되었습니다(암호 사용: 아니요). (0)	2023.08.06
혜성과 jQuery (0)	2023.08.06
구조체 끝의 크기가 0인 배열 (0)	2023.08.06

현재글CSS를 사용하면 다중 행의 오버플로 블록에 "..."를 사용합니다.

각종 프로그래밍 정보를 다루는 블로그입니다.

AngularJS, ReactJS, C, sql-server, TypeScript, mariadb, spring-boot, Bash, Excel, MongoDB, wordpress, PowerShell, ajax, Android, jQuery, mysql, GIT, python, oracle, JSON,

Today :
Yesterday :

codebag

CSS를 사용하면 다중 행의 오버플로 블록에 "..."를 사용합니다.

CSS를 사용하면 다중 행의 오버플로 블록에 "..."를 사용합니다.

-웹킷 줄 바꿈

사라지다, 사라지다

솔루션 #3 - @supports를 사용한 조합

CSS

CSS:

html:

바이올린

HTML

CSS

작동 피들(확인할 창 크기 조정)

내 블로그에 링크를 연결하여 설명

업데이트된 피들

행 수정 가져오기

흘러가다`...more`

창 크기 조정 또는 요소 변경 탐지

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

CSS를 사용하면 다중 행의 오버플로 블록에 "..."를 사용합니다.

CSS를 사용하면 다중 행의 오버플로 블록에 "..."를 사용합니다.

-웹킷 줄 바꿈

사라지다, 사라지다

솔루션 #3 - @supports를 사용한 조합

CSS

CSS:

html:

바이올린

HTML

CSS

작동 피들(확인할 창 크기 조정)

내 블로그에 링크를 연결하여 설명

업데이트된 피들

행 수정 가져오기

흘러가다...more

창 크기 조정 또는 요소 변경 탐지

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바

흘러가다`...more`