1

CSS でこれを達成するのを手伝ってください: 1 文字から 200 文字までのテキスト文字列の配列があります。それらをWebページにそれぞれ別のボックスに表示する必要があります。

  • ボックス フローはテキストに似ており、ページの最後まで左から右に移動し、その後折り返されます。
  • 各ボックスの背景色はシアンでなければなりません。
  • 最小の幅と高さは両方とも 50 ピクセルにする必要があります
  • ボックス間の 1 ～ 2 ピクセルのスペース (margin=1 で実現可能)
  • テキストとボックスの端の間には常に少なくとも 2 ピクセルが必要です。
  • テキストは中央に垂直に配置されます
  • テキストは中央に水平に配置されます
  • ボックスの最大幅は 300 ピクセルにする必要があります
  • テキストが 50x300 に収まらない場合は、ボックス内でトリミングされます (ボックスは大きくなりません)。
  • 各ボックスには 1 ピクセルの黒い境界線が必要です

これは、経験豊富な人にとっては簡単なはずです。考えられるほとんどすべての CSS タグをすでに試しています。しかし、常に何かが間違っています。CSS ボクシングについて読んだことがありますが、驚くべきことに、CSS ボクシングがさらに複雑になりました。

<style>
z {
    min-width: 50;
    #min-height: 50;
    padding: 1px;
    padding-color: magenta;
    margin: 1px;
    margin-color: red;
    #padding-left: 10px;
    display: table-cell;
    #height: 50;
    #vertical-align: middle;
    #text-align:center;
    background-color: cyan;
    #border: 1px;
    #border-color:green;
    /* padding:10px 10px 10px 10px; */
    border-top:1px solid
    border-style:solid;
    border-color:#ff0000 #0000ff;
    outline-style:dotted;
    outline-color:#00ff00;
    outline-width: 1px;
    color: blue;
}
</style>

<html>
    <z>1</z>
    <z>abcdefghijklmnope</z><z>2</z><z>blablablabla</z>
</html>

私はこれを貼り付けているので、あなたは私がどれほど一生懸命で間違っているかを見ることができます.

4

3 に答える 3

1

（洗練された答え）

高さ/幅が必要な場合に必要なのは display:block ではありません.OPも要素を隣り合わせに表示してからブレークするため、float:left; 表示ブロックではなく必須です。

text-overflow:ellipses; の使用法を実装しました。要素が常に視覚的なバランスと垂直方向の配置を持つように、テキストを「分割」するのに役立ちます。テキスト全体を表示するために、ツールチップまたは html abbr 属性を提供できますか?

任意の要素の 'z' に float:left を指定すると、問題が解決されます (はずです)。

span {
    min-width: 50px;
    max-width:200px;
    height: 24px;
    margin: 1px;
    float:left;
    text-overflow:ellipsis;
    overflow:hidden;
    vertical-align: middle;
    text-align:center;
    background-color: cyan;
    border: 1px solid green;
    padding:10px;
    color: blue;
    white-space:no-wrap;
}

http://jsfiddle.net/MzKCh/3/

于 2013-05-21T13:47:32.230 に答える
0

あなたの要件を正しく理解しているかどうかはわかりませんが、float:left要素をdisplay:table-cell組み合わせると、ページの最後に達したときにテキストが折り返されますが、垂直方向と水平方向の両方の中央揃えが可能です

html:

<div><span>test</span></div>
<div><span>test 1</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length and will hide extra content if really really long</span></div>
<div><span>a</span></div>
<div><span>Amassivewordwithnospacesthatwillalsowrapifithits300px</span></div>

CSS:

div 
{
    border:1px solid #000000; 
    background-color:cyan;
    float:left;
    margin:1px 1px 0 0;

    box-sizing:border-box;
    height:50px;
    max-width:300px;
    overflow:hidden;
}

div > span 
{
    display:table-cell;
    min-width:50px;
    max-width:300px;
    height:50px;
    padding:2px;
    text-align:center;
    word-wrap:break-word;
    box-sizing:border-box;
    vertical-align:middle;
}

http://jsfiddle.net/up6KC/6/

于 2013-05-21T13:53:10.573 に答える