在CSS中重叠文本 - 我该如何改变它？ [英] Overlapping Text in CSS - How do I change it?

问题描述

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

I'm trying to change an overlapping element (text) in my css file. One line of texts (in a regular browser) appears as two lines of text in mobile, overlapped together.

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

This change is for the mobile version of the site (the @media section for landscape tablets)

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

Currently, the header (h2) text is overlapping on an iPad/tablet.

代码来自h2 <$ c
$ b

Code from the h2 @media section:

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

（ .da-slide h2 是在HTML中包含此文本的组件）

(The .da-slide h2 is the component that holds this text in the html)

我尝试了 line-height 属性，但它没有工作？

I tried the line-height property but it didn't work?

任何想法...

推荐答案

你确定行高css属性已经应用到你的类了吗？

Are you sure that the line-height css property has been apply to your class?

CSS

CSS

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

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

Otherwise, have you added the meta tag in the header?

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

另外，对于响应式网站，请确保文本不被调整：

Also, for responsive website, be sure that the text isn't ajusted:

CSS

CSS

body { -webkit-text-size-adjust: none; }

这篇关于在CSS中重叠文本 - 我该如何改变它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！