[html] 고정 너비 범위에서 긴 텍스트 / 단어를 줄 바꿈하거나 나누려면 어떻게해야합니까?

<span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>간격이없는 긴 텍스트 문자열 과 같은 범위에 어떤 것을 입력 할 때 단어가 다음 줄로 나뉘거나 줄 바꿈 되는 고정 너비의 범위를 만들고 싶습니다 .

어떤 아이디어?

답변

CSS 속성을 사용할 수 있습니다.이 속성 word-wrap:break-word;은 범위 너비에 비해 너무 길면 단어를 분리합니다.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

스 니펫 확장

답변

다음을 추가하여 다음 CSS를 시도하십시오 white-space.

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

답변

이렇게

데모

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

답변

기본적으로 a span는 inline요소이므로 기본 동작이 아닙니다.

CSS span에 추가 display: block;하여 그렇게 할 수 있습니다 .

span {
    display: block;
    width: 100px;
}

답변

이 시도

span {
    display: block;
    width: 150px;
}

답변

질문의 실용적인 범위를 확장하고 주어진 답변에 대한 부록으로 : 때때로 선택자를 조금 더 지정해야 할 필요가있을 수 있습니다.

전체 범위를 display : inline-block 으로 정의하면 이미지를 표시하기 어려울 수 있습니다.

따라서 다음과 같이 범위를 정의하는 것을 선호합니다.

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

답변

제 경우에는 display : block이 의도 한대로 디자인을 깨고있었습니다.

그 max-width재산이 방금 저를 구했습니다.

그리고 스타일링 text-overflow: ellipsis에도 사용할 수 있습니다 .

내 코드는

max-width: 255px
overflow:hidden