14

我正在尝试更改我的 css 文件中的重叠元素（文本）。一行文本（在常规浏览器中）在移动设备中显示为两行文本，重叠在一起。

此更改适用于网站的移动版本（横向平板电脑的 @media 部分）

目前，标题 ( h2) 文本在 iPad/平板电脑上重叠。

h2@media部分的代码：

.da-slide h2{
    font-size: 36px;
    width: 80%;
    top: 40px;
    padding: 18px 20px 18px 20px;

（这.da-slide h2是在 html 中保存此文本的组件）

我尝试了该line-height属性，但它没有用？

有任何想法吗...

4

2 回答 2

22

您确定 line-height css 属性已应用于您的课程吗？

CSS 

    .da-slide h2{
        font-size: 36px;
        line-height: 36px;
        width: 80%;
        top: 40px;
        padding: 18px 20px 18px 20px;
    }

否则，您是否在标题中添加了元标记？

<meta name="viewport" content="width=device-width, initial-scale=1">

此外，对于响应式网站，请确保未调整文本：

CSS

body { -webkit-text-size-adjust: none; }
于 2013-05-14T11:02:29.107 回答
7

这应该通过防止文本换行来做到这一点，但它会切断结束文本。即不会显示任何比宽度长的文本。

只需将其添加到现有类中：

display: block; /* may help stop any text wrapping and display it inline. */
display: inline; /* same as above */
white-space: nowrap;/* ensure no wrapping */
overflow: hidden; /* if for some reason it escapes the visible area don't display anything. */

我个人喜欢对长标题和平板设备使用省略号效果。省略号修剪文本并在已修剪文本的位置添加三个点。

text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text  continues */

效果示例如下：

This is an extremely long and completely unavoidable page title I need to show

这是一个非常长且完全不可避免的页面标题，我需要显示

根据宽度可能显示为：

This is an extremely long...

希望有帮助。

于 2013-08-08T01:51:19.493 回答