Bootstrap 3の境界線から長い電子メールアドレスが外に出るサムネイル

Question

メンバープロフィールを挿入しようとすると、長いメールがブートストラップ2サムネイルのbderから出てきます。ここでenter image description here

は私が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"> 
 
\t \t \t \t \t \t \t \t \t <img src="@Umbraco.TypedMedia(item.GetValue<string>("companyLogo")).Url" class=" " style=" float:left;"> \t 
 
\t \t \t \t \t \t \t \t </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>

に使用してmはかみそりの構文ですか？私はあなたの助けを感謝します:)

Answer 1

あなたの電子メールアドレスが含まれている要素の幅よりも長く、あなたの電子メールアドレスが単一の「単語」であると考えると、アップ。

最高の解決策は私の意見では、省略記号（示されている以上のテキストがあることを示す単語の最後に3つのドット）を使用することです。これは、電子メールアドレスに次のCSSを適用することによって行うことができます：

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

希望します！ :)