Question

我有一个带有CSS的盒装盒，我有一些信息。我有一个名为“description”的字符串，它在盒子外面运行（它被切断，因此它不会在框，但只显示第一行），而不是包装：

图：

它是什么：

[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;}

你看到我不是吗？谢谢您的帮助。

Answer 1

将CSS中的line-height .anchor-hover .details调整为1em。

请看这个小提琴：http://jsfiddle.net/tbfd8/

Answer 2

在Firefox或Chrome中，打开您的网站并右键单击，选择＆＃34;检查元素...＆＃34;在您的.boxxy和子元素上方或周围悬停时。你应该看到一些CSS样式。查看是否已划掉宽度或任何其他值。我的猜测是：

.desc在设置宽度，填充或边距的不同位置有一些重写div元素。

这是调试CSS的重要方法，所以如果你还没有这样做，我会强烈建议。如果您不想这样做，请删除除此之外的所有CSS引用，并在那里，逐行，在您的CSS代码中进行操作，或者，如果您需要更多帮助，请分享所有您的CSS代码。在你完成所有工作之前，你可能会发现错误了！

来自Firefox的示例： Boxxy Box Debugging

Answer 3

word-wrap:break-word;

这应该可以解决问题。把它放在.boxxy类中。这将把文字包装在盒子里，这样它们就不会溢出开箱即可隐藏。

这是你在找什么？

Answer 4

检查overflow: hidden;是否未应用于元素。如果是，您可以设置overflow: initial;

描述不是在boxxy框中“包装”

4 个答案: