CSS에서 텍스트가 넘쳐나는 것을 방지하는 방법?

CSS에서 텍스트가 넘쳐나는 것을 방지하는 방법?

CSS에서 div 블록의 텍스트가 넘쳐나는 것을 방지하려면 어떻게 해야 합니까?

div {
  width: 150px;
  /* what to put here? */
}

<div>This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

div의 오버플로 텍스트를 숨기거나 스크롤 바를 만드는 대신 자동으로 새 줄을 긋도록 하려면

word-wrap: break-word

소유물.

다음을 시도해 볼 수 있습니다.

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

자세한 내용은 문서에서 오버플로 속성을 확인하십시오.

단답형

간단히 사용:

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

긴 대답

1. word-wrap

긴 단어를 다음 줄로 자르고 래핑할 수 있습니다.

가능한 값:

• normal: 허용된 중단점에서만 단어 중단
• break-word: 깨지지 않는 단어를 깨도록 허용합니다.

div {
    width: 150px; 
    border: 2px solid #ff0000;
}

div.normal {
    word-wrap: normal;
}

div.break {
    word-wrap: break-word;
}

<h2>word-wrap: normal</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-wrap: break-word</h2>
<div class="break"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

2. white-space

요소 내부의 공백을 처리하는 방법을 지정합니다.

가능한 값:

• nowrap로 줄 텍스트는 다음 줄로 묶지 않습니다.
• pre-wrap: 공백은 브라우저에 의해 보존됩니다.텍스트는 필요할 때 랩하고, 온라인은 중단됩니다.

div {
    width: 150px;
    border: 2px solid #ff0000;
}

div.nowrap {
    white-space: nowrap;
}

div.pre-wrap {
    white-space: pre-wrap;
}

<h2>white-space: nowrap</h2>
<div class="nowrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

<h2>white-space: pre-wrap</h2>
<div class="pre-wrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

3. word-break

줄의 끝에 도달할 때 단어를 끊는 방법을 지정합니다.

가능한 값:

• normal 줄 기본 줄 바꿈 규칙입니다.
• break-word할 수 넘침을 방지하기 위해 임의의 지점에서 단어를 구분할 수 있습니다.

div {
  width: 150px; 
  border: 2px solid #ff0000;
}

div.normal {
  word-break: normal;
}

div.break-word {
  word-break: break-word;
}

<h2>word-break: normal (default)</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-break: break-word</h2>
<div class="break-word"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

브라우저별 버전의 경우white-space:,:

white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera <7 */
white-space: -o-pre-wrap;   /* Opera 7 */

CSS 속성 텍스트 오버플로우를 사용하여 긴 텍스트를 잘라낼 수 있습니다.

  #greetings
  {
    width: 100px;
    border: 1px red solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // This is where the magic happens
  }

    <div id="greetings">
      Hello universe! 
    </div>

    <div id="greetings">
      Hello universe! 12345678901234567890
    </div>

참조 : http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

CSS로 제어할 수 있으며 몇 가지 옵션이 있습니다.

• hidden -> 오버플로되는 모든 텍스트가 숨겨집니다.
• visible -> 텍스트가 넘치게 표시되도록 합니다.
• 스크롤 -> 텍스트가 넘치면 스크롤 막대를 놓습니다.

도움이 되길 바랍니다.

CSS 속성은 다음과 같습니다.

white-space : normal;

공백 속성은 텍스트가 적용된 요소에서 텍스트를 처리하는 방법을 제어합니다.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

이 문제를 해결하려면 이 클래스를 추가해 보십시오.

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

이 링크 http://css-tricks.com/almanac/properties/t/text-overflow/ 에서 자세히 설명합니다.

overflow: scroll 아니면 오토.스타일 속성에서

w3부터 기본적인 것부터 시작하는 게 좋을 것 같아요.

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

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

이제 CSS 속성입니다.

word-break: break-all

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

만약 당신의 div가 css에서 높이가 설정되어 있다면 div 밖으로 흘러 넘치게 됩니다.

항상 디바의 최소 높이를 유지해야 한다면 디바의 최소 높이를 부여할 수 있습니다.

IE6에서는 Min-height가 작동하지 않지만 IE6 특정 스타일시트가 있는 경우 IE6의 일반 높이를 지정할 수 있습니다.IE6의 높이는 내부 내용에 따라 바뀝니다.

다음과 같이 css에서 min-width를 설정할 수 있습니다.

.someClass{min-width: 980px;}

그것은 깨지지 않을 것입니다. 그럼에도 불구하고 당신은 여전히 스크롤 바를 처리해야 합니다.

CSS의 어느 부분에서 문제가 발생하는지 파악하는 방법에 대한 권장 사항:

1) 세트를style="height:auto;"모든 방면에서<div>요소를 선택한 후 다시 시도합니다.

2) 세트style="border: 3px solid red;"모든 방면에서<div>당신의 영역의 너비를 확인하기 위한 요소들.<div>의 상자가 차지하고 있습니다.

3) 모든 css를 제거합니다.height:#px;CSS의 속성을 확인하고 다시 시작합니다.

예를 들어 다음과 같습니다.

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

!! 앞으로 하드 코딩 트레이드 오프!!주변 코드 및 화면 해상도에 따라 다른/원하지 않는 동작이 발생할 수 있습니다.

숨겨진 오버플로가 불가능하고 올바른 하이픈이 필요한 경우 단어/텍스트를 끊으려는 소프트 하이픈 HTML 엔티티를 사용할 수 있습니다.이렇게 하면 중단점을 수동으로 결정할 수 있습니다.

­

하이픈은 단어가 주변 컨테이너를 넘치지 않도록 끊어야 할 때만 나타납니다.

예:

<div class="container">
  foo&shy;bar
</div>

결과적으로 컨테이너가 충분히 넓고 텍스트가 컨테이너에 오버플로되지 않을 경우:

foobar

결과적으로 컨테이너가 너무 작고 텍스트가 실제로 컨테이너를 오버플로하는 경우:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

자세한 내용 : https://en.wikipedia.org/wiki/Soft_hyphen

언급URL : https://stackoverflow.com/questions/1165497/how-to-prevent-text-from-overflowing-in-css