CSS - word-break는 요소 위치를 변경합니다.

필자가 작성한 일부 웹 서비스에 대해 약간의 대시 보드를 만들려고 시도했지만, 위젯 내의 텍스트가 중단 될 때마다 위젯의 위치가 변경됩니다.CSS - word-break는 요소 위치를 변경합니다.

CSS는 다음과 같습니다

#container { 
    text-align: center; 
    width: 100%; 
    height: auto; 
} 

.widget { 
    background-color: firebrick; 
    margin: 1px; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    text-align: center; 
    word-break: break-all; 
}

내가 바이올린에서 그 문제를 재현 :
https://jsfiddle.net/vbb6fhz0/1/

출처

2016-09-13 thetft

상자를 정렬하려면 더 나은 결과를 위해 float를 사용하십시오. 단어 분리는 정렬과 아무런 관련이 없습니다.

그러나 귀하의 경우

, 그냥 vertical-align: middle는 정렬 문제

를 해결

#container { 
 
    text-align: center; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.widget { 
 
    background-color: firebrick; 
 
    margin: 1px; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    word-break: break-all; 
 
    vertical-align: middle; 
 
}

<body> 
 
    <div style="width: 100%; height:100%;"> 
 
    <div id="container"> 
 
     <div class="widget"> 
 
     <p>1dawdawdaegsergsergsrsrgrsddadawdadawdwdwbf</p> 
 
     </div> 
 
     <div class="widget"> 
 
     2wdadawdad 
 
     </div> 
 
     <div class="widget"> 
 
     3wadawdwdawda 
 
     </div> 
 
     <div class="widget"> 
 
     4dawdawdaw 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</body>

출처

2016-09-13 13:16:54

완벽한, 감사합니다! – thetft

당신이 떠 시도해야 작업 휴식 나쁜 아무것도 없다

.widget{float:left;}

출처

2016-09-13 13:07:43

와우 바보 같은 나 .. 그 도움이! 감사! – thetft

편집 : 이상한 위치 지정에 도움이되었지만 위젯을 div의 가운데에 배치하고 싶었습니다. 왼쪽으로 뜨다; 센터링을 재정의합니다. – thetft

CSS - word-break는 요소 위치를 변경합니다.

답변

관련 문제