나는 긴 단어에 문제가있다 : 나의 말은 상자 밖으로 나간다. 나는이 단어 lksadlkasdjlaksdjasdasjdklsajdlaskdaskldjasdkladja 예를 들어, 그래서 만약 모든 솔루션이 lksadlkasdjlaksdjasdasjdk- NEXT 로우 -> jdlaskdaskldjasdkladja텍스트를 다음 행에서 강제로 중단시키는 방법은 무엇입니까?
어떤 제안처럼 행동 할 수 있나요?
이 작업을 수행하려면 word-break 또는 overflow-wrap을 사용할 수 있습니다. 또한 독자에게 휴식을 나타 내기 위해 CSS hyphens을 추가하십시오.
오버 플로우 랩 : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
단어 휴식 : https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
참고 : 워드 브레이크는 달리, 오버 플로우 랩은 휴식을 만들 것입니다 전체 단어가있는 경우 범람하지 않고 자체 회선에 배치 할 수 없습니다.
하이픈 : 코드가 어디
span {
background: #eee;
width:150px;
height:auto;
display:block;
margin-bottom: 1rem;
}
span:nth-child(1){
word-wrap: break-word;
hyphens: auto;
}
span:nth-child(2){
overflow-wrap: break-word;
hyphens: auto;
}<span>abcdefghijklmnopqrstuvwxyz</span>
<span>abcdefghijklmnopqrstuvwxyz</span>word-wrap: break-word;을 사용하여 긴 문자열을 분리 할 수 있습니다.
span{
border:1px solid red;
width:50px;
height:50px;
display:block;
word-wrap: break-word;
overflow: hidden;
}<span>jhfhgfhfghdfghdgfdfgdfgdfgdgfdghdgfdgfdgfdgfcgfvchgchvhvhgvchghg</span>당신이 알고있는 경우 * 당신은 분할 단어를 원하는 *, 당신은 "소프트 하이픈"를 사용 할 수있는 : ­
경우] : 원하는 위치에이 코드를 삽입 컨테이너가 충분히 넓 으면 단어가 하나로 표시되고 그렇지 않으면 소프트 하이픈에서 깨집니다.
.a {
width: 200px;
border: 1px solid #ddd;
}
.b {
width: 400px;
border: 1px solid #ddd;
}<p class="a">lksadlkasdjlaksdjasdasjdk­jdlaskdaskldjasdkladja</p>
<p class="b">lksadlkasdjlaksdjasdasjdk­jdlaskdaskldjasdkladja</p>참고 : word-wrap: break-word; 참고 : 더 짧은 단어도 중단됩니다.
입니다 .. 아래 https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
두 예제? – Bhargav
'word-wrap' CSS 속성을 찾고있을 것입니다. – csmckelvey