Question

我正在尝试更改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属性，但它没有用？

任何想法......

Answer 1

你确定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; }

Answer 2

这应该通过阻止文本换行来实现，但它会切断结束文本。即不会显示任何超过宽度的文字。

只需将其添加到现有类：

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

希望有所帮助。

CSS中的重叠文本 - 如何更改？

2 个答案: