如何包装此文本以使其不会溢出小部件容器？

Question

我有一个Wordpress小部件，在小部件内我显示个人资料信息。有时第二行的文本太长而且溢出小部件容器。

处理这个问题的好方法是什么，我怎样才能用css或html或其他方式实现它？

我的css

#profileContainer { 
    float: left;
    position: relative;
    width: 400px;
    display:block;    
    padding: 5px;
}

#avatarContainer {
    width: 55px;
    float: left;
    padding: 5 5 5 5;
}

#dataContainer {
    float: left;
    vertical-align: text-top;
    word-wrap: break-word;    
}

#dataList {
    display: inline-block;    
}

我输出的html

?>
<div id="profileContainer">
<?php
$img = bp_core_fetch_avatar( 'html=false&item_id=' . $author->getId() );
$img_html = '<img src="' . $img . '"></img>';

?>
<div id="avatarContainer">
<?php        

if ($author->getUrl() != null) {    
    echo "<a href='" . $author->getUrl() . "'>" . $img_html . "</a>";
} else {
    echo $img_html;
}
?>
</div> <!--closing avatar container div -->

<div class="overflow-hidden">
<?php

if ($author->getName() != null) {
    echo "<b>" . $author->getName() . "</b>";
}

if ($author->getJobTitle() != null) {
    echo "<br/>" . $author->getJobTitle();
}

if ($author->getUserName() != null) {
    if ($author->getUrl() != null) {
        echo "<br/><a href='" . $author->getUrl() . "'>@" . $author->getUserName() . "</a>";
    } else {
        echo "<br/>@" . $author->getUserName();
    }
}

if ($author->getEmail() != null) {
    echo '<br/><a href="mailto:' . $author->getEmail() . '">' . $author->getEmail() . "</a>";
}

if ($author->getPhone() != null) {
    echo "<br/> " . $author->getPhone();
}

echo "<br/>";

?>
</div> <!--closing data container div -->
</div> <!--closing container div-->
<?php

Answer 1

在css中执行此操作以在elipsis模式下包装文本（三个点）

.overflow-hidden{
    max-width:400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}