0

![在此处输入图像描述][1]基本上，我在 ccs3 中创建了一些带有单选按钮的漂亮选项卡。这在浏览器中看起来很棒并且很有效。

然而，在移动设备上情况并非如此，文本从选项卡非常小的容器中溢出。到位的媒体查询似乎没有做任何事情，关于如何让它工作的任何想法？

.tabs {
    position: relative;   
    min-height: 260px; /* Changes the height of the tabs section, enables you to change it for your text */
    clear: both;
}

@media only screen and (max-width: 480px)  {
    .tabs {
        min-height: 480px; /* Changes the height of the tabs section (MOBILE), enables you to change it for your text */
    }
}

所以我想要做的只是让媒体查询正常工作，这样我就可以更改包含选项卡的高度，以便容器中的文本。

http://mdixon94.co.uk/HTML/elements.html

你可以在这里看到，如果你向下滚动，选项卡部分看起来很好，但是如果你用 iphone 预览它，文本到处都是，我只是想通过媒体查询使容器更大。

4

2 回答 2

0

您可以在 CSS 中使用省略号

.tabs {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

这应该给你这样的东西：

桌面
|这是我的标签文本|
手机
|这是我的...|

于 2013-10-22T17:12:59.407 回答
0

您还可以添加此属性：

.tabs {
   white-space:normal;
}
于 2013-10-22T17:16:54.660 回答