1

I'm trying to build a simple HTML5 page that displays a URL in the center of the page. I found some good answers here:

CSS: Center text both horizontal and vertical?

and I've been using the answer from James Johnson which works great.

The problem is that I'm writing this page to be displayed on a small screen, and I need the URL to wrap correctly even though there are no line breaks. Adding the word-wrap:break-word; option doesn't seem to help - the text is half cut-off on the screen.

Does anyone know how I can get my centred text to wrap correctly?

As requested, here's my exact code. Instead of wrapping text, the border just grows larger than 200 pixels wide:

<!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>
Community
  • 1
  • 1

2 Answers2

1

For a cross browser CSS approach try 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 */
}
Community
  • 1
  • 1
Kurt Van den Branden
  • 11,995
  • 10
  • 76
  • 85
0

You could try to add a break in your link for low resolutions with a media query:

.yourselector br { display: none; }

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