2017-05-10 6 views
-2

1行または複数行を垂直に整列する方法は?1行または複数行を垂直に整列する方法

私は省略記号が必要ですが、状況によっては1行しか表示しないことがあります。

これはこれまでのところ私のコードです:

html, body, p { 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
} 
.ellipsis { 
    height: 100px; 
    border: 5px solid #AAA; 
} 

.blah { 
    overflow: hidden; 
    height: 1.2em; 
    line-height: 1.2em; 
    display: block; 

} 
.blah:before { 
    content:""; 
    float: left; 
    width: 5px; 
    height: 3.6em; 
} 
.blah > *:first-child { 
    float: right; 
    width: 100%; 
    margin-left: -5px; 
} 

ライブ例:http://jsfiddle.net/0dqef9da/274/

+0

可能な重複します(http:/

リンクをクリックしてください/stackoverflow.com/questions/5269713/css-ellipsis-on-second-line) – Troyer

+0

これは私の質問ではありません...私の質問は、1行または複数の行を垂直に整列する方法です。 – bundy

+1

問題文はあいまいです。 "[...]いくつかの状況では、私は1行だけ、そして時には2行だけを表示したい。"どのような状況で*正確に*? –

答えて

-2

あなたは単にtext-align: center;した場合に使用しますテキストのCSSスタイル属性でword-break:break-all

-2

垂直整列センターを使用する必要があります省略記号を使用したい

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#div1 { 
 
    white-space: nowrap; 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: clip; 
 
    border: 1px solid #000000; 
 
} 
 

 
#div2 { 
 
    white-space: nowrap; 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid #000000; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p> 
 

 
<p>This div uses "text-overflow:clip":</p> 
 
<div id="div1">This is some long text that will not fit in the box</div> 
 

 
<p>This div uses "text-overflow:ellipsis":</p> 
 
<div id="div2">This is some long text that will not fit in the box</div> 
 

 
</body> 
 
</html>
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

省略記号であなたはdivの幅が...上記のコードを確認してくださいまた、必要

[二行目のCSS省略記号]の
+0

2行表示方法は? – bundy

+0

あなたは(間違って) 'text-align:center'が垂直に整列していることをあなたに言いますが、あなたの解決策から完全に省略します... –

+0

このリンクをチェックしてください:http://stackoverflow.com/questions/5269713/ css-2行目の省略記号 –

関連する問題