Programing

플렉스 아이템이 텍스트로 인해 넘치지 않게하는 방법은 무엇입니까?

crosscheck 2020. 11. 8. 09:19
반응형

플렉스 아이템이 텍스트로 인해 넘치지 않게하는 방법은 무엇입니까?

이 질문에 이미 답변이 있습니다.

목록을 위해 다음 레이아웃을 염두에두고 있습니다. 각 목록 항목은 두 개의 열로 표시됩니다. 두 번째 열은 사용 가능한 모든 공간을 차지해야하지만 첫 번째 열이 너무 많은 공간을 차지하는 경우 최소 크기로 오른쪽에 고정되어야합니다. 그러면 첫 번째 열에 줄임표가 표시됩니다.

마지막 경우에 문제가 발생합니다. 첫 번째 열이 줄임표를 표시하는 대신 너무 많은 텍스트로 구성되어 있으면 가변 상자 밖으로 확장되어 가로 스크롤 막대가 나타나고 두 번째 열은 오른쪽에 고정되지 않습니다.

다음과 같이 렌더링하고 싶습니다 (목업).

예상되는 렌더링

어떻게 할 수 있습니까?

이것은 샘플 바이올린 입니다.

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

최신 정보

작동하는 코드 추가 :

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

원래 답변 / 설명.

W3C 사양은 " 기본적으로 플렉스 항목은 최소 콘텐츠 크기 (가장 긴 단어 또는 고정 크기 요소의 길이) 이하로 축소되지 않습니다.이를 변경하려면 '최소 너비'또는 '최소 높이'를 설정합니다. 재산. "

이 추론을 따르면 버그가 Canary에서 제거되었다고 생각합니다.

최대한 빨리 넣어 확인 min-width에 0, 그것은 카나리아에서 작동합니다.

따라서 버그는 이전 구현에 있었고 카나리아는 해당 버그를 제거합니다.

이 예제는 카나리아에서 작동합니다. http://jsfiddle.net/iamanubhavsaini/zWtBu/

Google Chrome 버전 23.0.1245.0 카나리아를 사용했습니다.

다음과 같이 flex속성 의 세 번째 값 을 auto 로 설정하여 자식의 기본 크기를 설정할 수 있습니다 .

flex: 1 0 auto;

이것은 flex-basis 속성 을 설정하는 약어입니다 .

( 예 )

그러나 댓글에서 언급했듯이 Chrome Canary에서는 작동하지 않는 것 같습니다. 이유는 모르겠습니다.

업데이트 : 이것은 답이 아닙니다. 다른 문제를 해결하고 실제 답을 찾는 단계였습니다. 그래서 나는 역사적인 이유로 그것을 유지하고 있습니다. 그것에 투표하지 마십시오.

나는 이것이 당신의 대답이라고 믿습니다 : http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

여기에 이미지 설명 입력

W3C 참조

첫 번째 요소

-webkit-flex: 0 1 auto; /* important to note */

두 번째 요소의 경우

-webkit-flex:1 0 auto; /* important to note */

트릭을 수행하는 속성과 값입니다.

http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex 에서 자세히 알아보기

그리고 이것은 순서를 반대로하는 방법입니다 : http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

그리고 이것은 red-backgrounded-thingy의 미리 정의 된 최소 너비를 가진 것입니다 : http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

mozilla의 경우 "min-width : 1px;"를 추가해야합니다.

이 예제는 정말 도움이되었습니다 : http://jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

업데이트 : 이것은 답이 아닙니다. 다른 문제를 해결하고 실제 답을 찾는 단계였습니다. 그래서 나는 역사적인 이유로 그것을 유지하고 있습니다. 그것에 투표하지 마십시오.

편집 2 :이 대답은 문제를 해결하지 않습니다. 질문의 대상과 답변 사이에는 미묘한 차이가 있습니다.

우선, text-overflow:ellipsis함께 작동합니다 overflow:hidden. 실제로 overflow:visible. Ref

그런 다음 다음을 반복합니다.

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

Here, I have put overflow and max-width properties. max-width:60%; and overflow:hidden is what makes things appear as you intended, as hidden stops the text from displaying and 60% actually creates the box of definite size in case of too much text data.

Then, if you are really interested in flex box model here's how things pan out via -webkit-order.

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

--code--

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

​concerned CSS

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

​-- There is no width and still it works. And this is what I see.

여기에 이미지 설명 입력

--after comment

-webkit-order:N; is the what we will be using after 2+ years instead of float:---; and many more hacks(if W3C stays on this course and also if every browser vendor follow)

here, order is 1 for the left div and 2 for the right div. thus, they are Left-Right.

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

same thing here, but only if you are looking for Right-Left, just change the order of the things as div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}

NOTE: this -webkit-flex way of doing things obviously renders this code useless on other engines. For, reuse of code, on multiple browser engines floating should be used.

below are some JS examples; that doesn't answer the question -after comment

나는 이것이 당신의 질문에 답하고 앞으로 더 많은 것을 생각합니다. 다른 방법과 다른 해결책이 있지만이 질문에 대한 정확한 해결책은 아닙니다. http://jsfiddle.net/iamanubhavsaini/vtaY8/1/ http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/ http://jsfiddle.net/iamanubhavsaini/33v8g/4/ http://jsfiddle.net/ iamanubhavsaini / 33v8g / 1 /

컨테이너 위치 : 상대 위치 및 하위 위치 : 절대 위치를 만들어야합니다.

참고 URL : https://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text

반응형

'Programing' 카테고리의 다른 글

언제 stdClass를 사용해야하고 언제 PHP oo 코드에서 배열을 사용해야합니까?  (0) 2020.11.08
Xcode : 헤더 복사 : 공개 vs. 비공개 vs. 프로젝트?  (0) 2020.11.08
이미지를 BufferedImage로 변환하는 Java  (0) 2020.11.08
텍스트를 왼쪽으로 90도 회전하는 방법 및 셀 크기는 html의 텍스트에 따라 조정됩니다.  (0) 2020.11.08
JWT와 Bearer Token의 차이점은 무엇입니까?  (0) 2020.11.08

'Programing'의 다른글

  • 현재글플렉스 아이템이 텍스트로 인해 넘치지 않게하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바