CODEWITHSUNDEEP
htmlcsswordpress
albert
albert

Reputation: 61

How can I wrap this text so it doesn't overflow past the widget container?

I have a Wordpress widget and inside the widget I am displaying profile information. Some times the text for the 2nd row is too long and it overflows past the widget container.

enter image description here

What would be a good way to deal with this, and how could I implement it in css or html or whatever?

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

My html for the output

?>
<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

Upvotes: 0

Views: 313

Answers (1)

Crapo Wolf
Crapo Wolf

Reputation: 2351

in css do this to wrap text in elipsis mode (three dots)

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

Upvotes: 1

Related Questions