Bootstrap 3 缩略图中的长电子邮件地址超出边界

Question

当我尝试插入会员个人资料时，任何长电子邮件都会从 bootstrap 2 缩略图中的 bder 中消失。 enter image description here

这是我在 Umbraco 中使用的 Razor 语法

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

这可能是什么原因？非常感谢您的帮助:)

Answer 1

原因是您的电子邮件地址比包含元素的宽度长，并且考虑到您的电子邮件地址是单个 'word'，浏览器不确定在哪里将其拆分。

为了解决这个问题，我认为 最好的 解决方案是使用省略号（单词末尾的三个点表示文本多于示）。这可以通过将以下 CSS 应用于电子邮件地址来完成：

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

希望对您有所帮助！ :)

Bootstrap 3 缩略图中的长电子邮件地址超出边界

Long email address going out of border in Bootstrap 3 thumbnail

html

thumbnails

razor

twitter-bootstrap

umbraco7