Long email address going out of border in Bootstrap 3 thumbnail

Question

when I try to insert a member profile any long email goes out of the bder in bootstrap 2 thumbnail. enter image description here

Here is the razor syntax i m using in umbraco

<div class="thumbnail " style="padding:0;">
  <img src="@Umbraco.TypedMedia(item.GetValue<string>(" memberImage ")).Url" class="left" style="width:100%">

  <div class="caption">
    <h4 class="">@item.GetValue("name")</h4>
    <p>@item.GetValue("title")</p>

    @if (item.GetValue("companyLogo") != null) {
    <a href="@item.GetValue(" companyLink ")" target="_blank">
									<img src="@Umbraco.TypedMedia(item.GetValue<string>("companyLogo")).Url" class=" " style=" float:left;">	
								</a> }

    <p class="" style="clear:both">@item.GetValue("bio")</p>

    @*<a href="@item.GetValue(" companyLink ")" class="btn btn-warning pull-right" role="button"><i class="glyphicon glyphicon-edit"></i></a>*@
    <a href="mailto:@item.GetValue(" contactDetails ")">@item.GetValue("contactDetails")</a>

  </div>
</div>

What might be the reason for this? I would appreciate your help :)

Answer 1

The reason for it is that your email address is longer than the width of the containing element, and considering your email address is a single 'word', the browser is unsure where to break it up.

To get around this, the best solution in my opinion would be to make use of ellipsis (the three dots at the end of a word that indicate that there's more text than is shown). This can be done by applying the following CSS to the email address:

.caption a {
  width: 250px; /* you need a maximum width for the text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Hope this helps! :)