div 블록의 텍스트가 넘치지 않도록 할 수 있습니까?

div 블록의 텍스트가 넘치지 않도록 할 수 있습니까?

div의 넘침 텍스트가 숨겨 지거나 스크롤 막대를 만드는 대신 자동으로 줄 바꿈되도록하려면

word-wrap: break-word

특성.

당신은 시도 할 수 있습니다:

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

#myDiv {
    overflow:hidden;
}

확인 오버 플로우 속성에 대한 문서를 자세한 내용은.

CSS 속성 text-overflow를 사용하여 긴 텍스트를자를 수 있습니다.

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

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

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

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

• hidden-> 모든 텍스트 넘침이 숨겨집니다.
• visible-> 텍스트가 넘치도록합니다.
• scroll-> 텍스트가 넘칠 경우 스크롤 막대를 놓습니다.

도움이 되길 바랍니다.

간단히 이것을 사용하십시오 :

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

다른 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;
}

div의 높이가 CSS로 설정되어 있으면 div 외부로 오버플로가 발생합니다.

div에서 항상 최소 높이가되어야한다면 div에 최소 높이를 줄 수 있습니다.

IE6에서 최소 높이는 작동하지 않지만 IE6 특정 스타일 시트가 있으면 IE6에 대해 일반적인 높이를 제공 할 수 있습니다. 내용에 따라 IE6의 높이가 변경됩니다.

CSS에서 최소 너비를 설정할 수 있습니다. 예를 들면 다음과 같습니다.

.someClass{min-width: 980px;}

그럼에도 불구하고 여전히 스크롤 막대가 처리됩니다.

CSS의 어떤 부분이 문제를 일으키는 지 파악하는 방법에 대한 권장 사항 :

1) style="height:auto;"모든 설정<div> 요소를 하고 다시 시도하십시오.

2) style="border: 3px solid red;"모든 <div>요소를 설정 하여 <div>상자가 차지하는 영역의 넓이를 확인하십시오 .

3) CSS에서 모든 CSS height:#px;속성을 제거하고 다시 시작하십시오.

예를 들어 :

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

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

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

!! 앞서 하드 코딩 된 tradoff! 주변 코드 및 화면 해상도에 따라 다른 / 원치 않는 동작이 발생할 수 있습니다

숨겨진 오버플로가 문제가 아니며 올바른 하이픈 넣기가 필요한 경우 단어 / 텍스트를 나누려는 부드러운 하이픈 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