jquery - 说明在 boxxy 框中没有“包装”

Question

我有一个带有 CSS 的 boxxy 盒子，里面有一些信息。我有一个名为“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 中的 for 调整line-height为..anchor-hover .details1em

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

Answer 2

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

• .desc 有一些来自不同位置的覆盖 div 元素，用于设置宽度、填充或边距。

这是调试 CSS 的一种重要方法，所以如果您还没有这样做，我强烈建议您这样做。如果您不想这样做，请删除除此之外的所有 CSS 引用，然后在您的 CSS 代码中逐行解决，或者，如果您需要更多帮助，请分享您的所有 CSS 代码. 不过，在您完成所有操作之前，您可能会发现问题所在！

来自 Firefox 的示例：

Answer 3

word-wrap:break-word;

这应该够了吧。把它放在你的 .boxxy 类中。这会将单词包裹在盒子中，这样它们就不会溢出盒子并隐藏起来。

这是你想要的？

Answer 4

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