HTML5에서 텍스트를 가운데에 배치하고 줄 바꿈하는 방법

페이지 중앙에 URL을 표시하는 간단한 HTML5 페이지를 작성하려고합니다. 여기 좋은 해답을 발견HTML5에서 텍스트를 가운데에 배치하고 줄 바꿈하는 방법

CSS: Center text both horizontal and vertical?

나는 좋은 작품 제임스 존슨에서 답을 사용하고있다.

문제는이 페이지를 작은 화면에 표시하기 때문에 줄 바꿈이 없어도 올바르게 줄 바꿈을해야합니다. 단어 감싸기 추가 : 중단 단어; 옵션이 도움이되지 않는 것처럼 보입니다 - 텍스트가 화면에서 반으로 자릅니다.

내 주변 텍스트를 올바르게 줄 바꿈하는 방법을 아는 사람이 있습니까?

요청하신대로 정확한 코드는 다음과 같습니다.

<!DOCTYPE HTML> 
<html> 

<style type="text/css"> 
#container {  
    display:table;  
    border-collapse:collapse; 
    height:200px; 
    width:200px; 
    border:1px solid #000; 
}   
#layout {  
    display:table-row;  
}    
#content {  
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
word-wrap:break-word; 
}    
</style>  
<div id="container">  
    <div id="layout">  
     <div id="content">  
wefweflwjfijapowefjiaiwfejawi3af3ijwiiwajefajioaiwejcajjcap8uc83yw75078n377777777777777777777777777u9fjhfwjifwe7f902352698hiogn;lkegrierg90q3itoijaw4aw[igpjaw84h0q92jrjgauw-8rua 
     </div>  
    </div>  
</div> 

</html>

출처

2013-02-21 Anonymous

HTML 샘플은 변경해야 할 사항을 결정하는 데 가장 도움이됩니다. –

당신은 미디어 쿼리 낮은 해상도에 대한 링크에서 휴식을 추가 할 수 있습니다 :

.yourselector br { display: none; } 

@media (max-width: 320px) { 
.yourselector br { display: block; } 
}

출처

2013-02-21 21:59:36 dannehr

십자가 대신 텍스트를 포장의 국경이 빗나보다 큰 200 개 픽셀 성장 브라우저 CSS 접근 시도 this solution

.wordwrap { 
    white-space: pre-wrap;  /* CSS3 */ 
    white-space: -moz-pre-wrap; /* Firefox */  
    white-space: -pre-wrap;  /* Opera <7 */ 
    white-space: -o-pre-wrap; /* Opera 7 */  
    word-wrap: break-word;  /* IE */ 
}

출처

2016-01-11 15:02:49

HTML5에서 텍스트를 가운데에 배치하고 줄 바꿈하는 방법

답변

관련 문제