HTML에서 wrap text를 어떻게 말합니까?

HTML에서 wrap text를 어떻게 말합니까?

텍스트는 어떻게 다음과 같습니까?aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA의 폭을 초과하는div(말씀)200px싸여 있다고요?

저는 CSS, jQuery 등 어떤 종류의 솔루션에도 열려있습니다.

시도해 보기:

div {
    width: 200px;
    word-wrap: break-word;
}

부트 스트랩 3의 경우 공백이 'nowrap'으로 설정되어 있지 않은지 확인합니다.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

소프트 하이픈은 다음과 같이 사용할 수 있습니다.

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

다음과 같이 표시됩니다.

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

상자가 충분히 크지 않은 경우 또는

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

그렇다면.

div {
    /* Set a width for element */
    word-wrap: break-word
}

그 '.word-wrap' 솔루션은 IE 및 지원 브라우저에서만 작동합니다.CSS3.

가장 좋은 교차 브라우저 솔루션은 서버 사이드 언어(php 또는 무엇이든)를 사용하여 긴 문자열을 찾고 그 안에 html 엔티티를 규칙적인 간격으로 배치하는 것입니다.​이 엔티티는 긴 단어들을 잘 깨서 모든 브라우저에서 작동합니다.

예.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

이거 나한테 통했어요.

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

단어에 공백이 없는 경우(예: 긴 URL) IE, Firefox, Chrome, Safari 및 Opera에서 작동하는 유일한 방법은 다음과 같습니다.

div{
    width: 200px;  
    word-break: break-all;
}

방탄이라는 걸 알았어요.

또 다른 옵션은 다음을 사용하는 것입니다.

div
{
   white-space: pre-line;
}

이것은 CSS1을 지원하는 모든 브라우저에서 모든 div 요소를 설정할 것입니다 (IE 8까지 거슬러 올라가는 거의 모든 일반적인 브라우저입니다).

크로스 브라우저

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

CSS 트릭의 예:

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

여기에 더 많은 예시들이 있습니다.

HTML 본문에서 시도:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

CSS 본문에서 시도:

background-size: auto;

table-layout: fixed;

이 CSS를 문단에 추가합니다.

width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; 
padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left;

이 CSS 속성을 사용해 보십시오.

overflow-wrap: anywhere;

이거 먹어봐요.

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

속성 text-overflow: elips add... 및 line-clamp는 줄 수를 나타냅니다.

저는 부츠트랩을 사용한 적이 있습니다.나의 html 코드는 다음과 같습니다.

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

이 CSS를 사용할 수 있습니다.

p {
  width: min-content;
  min-width: 100%;
}

저에게 적합한 서버 사이드 솔루션은 다음과 같습니다.$message = wordwrap($message, 50, "<br>", true);어디에$message는 분할할 단어/문자를 포함하는 문자열 변수입니다. 50은 주어진 세그먼트의 최대 길이이며,"<br>"50자 단위로 삽입할 텍스트입니다.

이거 먹어봐요.

div {display: inline;}

시도:

overflow-wrap: break-word;

사용하다word-wrap:break-word필요한 너비와 함께 속성을 지정합니다.주로 폭을 백분율이 아닌 픽셀 단위로 표시합니다.

width: 200px;
word-wrap: break-word;

언급URL : https://stackoverflow.com/questions/1147877/how-to-word-wrap-text-in-html