如何在 HTML5 中居中和换行文本答案

【问题标题】：How to center and wrap text in HTML5如何在 HTML5 中居中和换行文本
【发布时间】：2013-02-07 09:42:32
【问题描述】：

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

CSS: Center text both horizontal and vertical?

我一直在使用 James Johnson 的答案，效果很好。

问题是我正在编写此页面以显示在小屏幕上，即使没有换行符，我也需要正确换行 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>

【问题讨论】：

HTML 样本最有助于确定需要更改的内容。

标签： html

【解决方案1】：

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

.yourselector br { display: none; }

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

【讨论】：

【解决方案2】：

对于跨浏览器 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 */
}

【讨论】：