StackOverflow 18584723

by creativevilla

HTML

<div id="new-massege">
    <div class="bs">
        <div id="text-part">
            <div id="text-messege"> <span>hello my friend how r you ???? I miss you honey</span>

            </div>
        </div>
    </div>
</div>

CSS

#new-massege {
    position: relative;
    height: 50px;
    width: 200px;
    display: inline-block;
    z-index: 2;
    cursor: pointer;
}
#text-part {
    position: absolute;
    height: 45px;
    width:145px;
    background: #cac7c5;
    top: 0;
    bottom: 0;
    margin: auto;
}
#text-messege {
    position: relative;
    padding: 10px;
}
span {
    display: block;
    font: 14px koodak, tahoma, arial;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}