1

ページの中央に URL を表示する単純な HTML5 ページを作成しようとしています。ここでいくつかの良い答えを見つけました：

CSS:テキストを水平方向と垂直方向の両方で中央揃えにしますか?

私は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>
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 に答える