텍스트를 HTML로 줄 바꿈하는 방법은 무엇입니까?

같은 방법 텍스트 수 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa있는이의 폭을 초과 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
    word-wrap: break-word
}

' word-wrap'솔루션은 IE와 브라우저가 지원하는 작품 CSS3.

가장 좋은 크로스 브라우저 솔루션은 서버 측 언어 (php 또는 무엇이든)를 사용하여 긴 문자열을 찾아서 일정한 간격으로 html 엔티티 안에 배치하는 것입니다. html 엔티티이 엔티티 ​ 는 긴 단어를 멋지게 나누고 모든 브라우저에서 작동합니다.

예 :

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

단어에 공백이없는 경우 (예 : 긴 URL) IE, Firefox, chrome, safari 및 opera에서 작동하는 유일한 것은 다음과 같습니다.

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

나는 이것이 방탄임을 알았습니다.

이것은 나를 위해 일했다

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;

다른 옵션도 사용하고 있습니다 :

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+ */
}

이 CSS를 단락에 추가하십시오.

style="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 트릭의 예 :

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

더 많은 예제는 여기에 있습니다 .

나를 위해 작동하는 서버 측 솔루션은 다음과 같습니다. $message = wordwrap($message, 50, "<br>", true);여기서 $message단어 / 문자가 포함 된 문자열 변수가 있습니다. 50은 주어진 세그먼트의 최대 길이이며 "<br>"매 50 문자마다 삽입 할 텍스트입니다.

이 시도

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 속성 : ellipsis add ... 및 line-clamp는 줄 수를 나타냅니다.

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;

이 시도

div {display: inline;}

부트 스트랩을 사용했습니다. 내 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%;
}

시험:

overflow-wrap: break-word;

word-wrap:break-word필요한 너비와 함께 속성을 사용하십시오 . 주로 너비가 아닌 백분율로 픽셀 단위로 입력 하십시오.

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