1

我正在尝试构建一个简单的 HTML5 页面，该页面在页面中心显示一个 URL。我在这里找到了一些很好的答案：

CSS：水平和垂直居中文本？

我一直在使用詹姆斯约翰逊的答案，效果很好。

问题是我正在编写此页面以显示在小屏幕上，即使没有换行符，我也需要正确换行 URL。添加 word-wrap:break-word; 选项似乎没有帮助 - 文本在屏幕上被截断了一半。

有谁知道我怎样才能让我的居中文本正确换行？

根据要求，这是我的确切代码。边框没有换行，而是增加了超过 200 像素宽：

<!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>
4

2 回答 2

1

对于跨浏览器 CSS 方法，请尝试此解决方案

.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-11T15:02:49.367 回答
0

您可以尝试使用媒体查询在低分辨率链接中添加中断：

.yourselector br { display: none; }

@media (max-width: 320px) {
.yourselector br { display: block; }
}
于 2013-02-21T21:59:36.453 回答