Question

我使用Bootstrap和一些CSS技巧为网站做了这个简洁的标题：http://www.bootply.com/QH5olSGxDU

但是当使用宽度较小的智能手机（如iPhone）时，文字会溢出，如下所示：http://imgur.com/k6JaKbi

你知道如何防止这种情况（理想的是通过裁剪标题如＃34;一些东西＃6 - Lorem ......＆＃34;）？我尝试了CSS属性text-overflow，但它没有用。

Answer 1

当屏幕尺寸小于特定尺寸时，您可以使用媒体查询来缩小<h2>的字体大小。

@media (max-width: 400px){
  div.header-image-single h2 { font-size: 16px; }
}

或者，您可以使用javascript检查窗口大小，如果小于某个值，则将某些标记修剪为一定数量的字符。

var str = originalString.substring(0, X); //original string comes directly from the content of the <h2>, the 0 is the starting position and the X is the number of characters you want to keep

这里有一个JSFiddle，它显示了这个替代方案（我使用jQuery来简化元素的选择/操作，但它也可以用普通的JS完成）

Answer 2

怎么样？

h2 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 300px; (I've used this to test without a mobile device)
}

如果需要，您只能在移动广告管理系统中应用white-space: nowrap;。

Answer 3

除了调整文本的字体大小外，您还可以为图像添加简单的最小高度。

.header-image img {min-height：275px; width：100％;}

如何修复高度和绝对位置溢出的文本

3 个答案: