0

私はいくつかの情報を含む CSS を含む boxxy ボックスを持っています。その中に「説明」と呼ばれる文字列があり、ボックスの外側で実行されています (切り取られるため、ボックスの外側では実行されませんが、最初の行のみが表示されます)、ラップする代わりに:

図:

それは何ですか：

[heyooo this is a] 
[                ]

私が欲しいもの：

[heyooo this is a]
[sentence        ]

これは私の見解ではhtmlです：

<div id="boxxy-list">           
    <ul class="additional-artists">
    @foreach ($artists as $artist)
        <li>
        <div class="boxxy">
            <a href="/artists/{{$artist->id}}" class="anchor-hover">
            <img src="{{ $artist->image_path}}" alt="{{$artist->stage_name}}" height="200" width="200">
            <span class="details">
                <h2>{{$artist->stage_name}}</h2>
                <p class="desc">{{$artist->description}}</p> //this is the portion that is not wrapping like it should.
                <span class="pupdate">{{ $artist->city}}, {{ $artist->state}}</span>
                <span class="viewlink">Play My City</span>
            </span>
            </a>
        </div>
        </li>

    @endforeach

    </ul>
    </div>

CSS:

.boxxy { display: block; margin: 0 auto; background:#fff; margin-bottom: 22px; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); width: 200px; padding:7px 7px;
        transition: box-shadow 0.3s linear 0s; -webkit-
        transition: box-shadow 0.3s linear 0s; -moz-
        transition: box-shadow 0.3s linear 0s;
        -o-transition: box-shadow 0.3s linear 0s;
}

.anchor-hover {display: block; position: relative;}
.anchor-hover img { position: relative; }

.anchor-hover .details { opacity: 0; position:absolute; top: 0px; left:0px; width: 200px; height:200px; margin: 0; padding-top: 0px; padding-left:0px; font-size: 1.2em; line-height: 0.1em; color:#8c8a7d; background: rgba(255,255,255,0.85); overflow: hidden; transition: opacity 0.25s linear 0s; -webkit-
transition: opacity 0.25s linear 0s; -moz-transition: opacity 0.25s linear 0s; -o-transition: opacity 0.25s linear 0s;
}

.anchor-hover .details h2 { font-weight: bold; font-size: 1.1em; color: #3c527d; margin-bottom: 8px; text-decoration:none;
}

.anchor-hover .details p.desc { font-family:'proxima-nova';
    font-weight:500;
    font-size:14px;
    color:#8c8a7d;
    text-decoration:none;
}

.anchor-hover .details span.pubdate { position: absolute; bottom: 10px; left:10px; font-weight: 500; font-family: 'proxima-nova', Tahoma, sans-serif; }
.anchor-hover .details span.viewlink { position:absolute; bottom: 10px; right: 10px; font-weight:bold; color: #3c527d; font-size: 1.3em;}

.anchor-hover:hover .details {opacity: 1;}
.boxxy:hover {box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(71, 123, 164, 0.7); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0, 0, 10px rgba(71, 123, 164, 0.7); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0, 0, 10px rgba(71, 123, 164, 0.7);}

#boxxy-list a {text-decoration: none;}

私ではない何かが見えますか？ご協力ありがとうございました。

4

4 に答える 4

0 
word-wrap:break-word;

これでうまくいくはずです。これを .boxxy クラスの中に入れます。これにより、単語がボックスからはみ出して隠れないように、単語がボックス内にラップされます。

これはあなたが探しているものですか？

于 2013-08-02T16:18:14.277 に答える