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

Posted 2023-03-29

【中文标题】Bootstrap 3缩略图中的长电子邮件地址超出边界

【英文标题】：Long email address going out of border in Bootstrap 3 thumbnail

【发布时间】：2018-04-21 14:46:14

【问题描述】：

当我尝试插入会员资料时，任何长电子邮件都会从 bootstrap 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">
									<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>

这可能是什么原因？我会很感激你的帮助:)

【参考方案1】：

原因是您的电子邮件地址比包含元素的宽度长，并且考虑到您的电子邮件地址是一个“单词”，浏览器不确定在哪里分解它。

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

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

希望这会有所帮助！ :)

【讨论】：

HI Obsidian css 省略号有效，但客户不喜欢整体设计哈哈。但谢谢它确实解决了宽度问题。 :)