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

5kgi1eie  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(170)

我试图改变css文件中的一个重叠元素(文本)。一行文本(在普通浏览器中)在移动的中显示为两行文本,重叠在一起。
此更改适用于网站的移动的版本(横向平板电脑的@media部分)
目前,iPad/平板电脑上的页眉(h2)文本重叠。
h2 @media区段的程式码:

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

(The .da-slide h2是在html中保存此文本的组件)
我尝试了line-height属性,但它不起作用?
有什么想法...

axr492tv

axr492tv1#

您确定行高css属性已套用至您的类别吗?

CSS格式

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

否则,您是否在标头中添加了 meta标记?

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

此外,对于响应式网站,请确保文本没有调整:

CSS格式

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

yhxst69z2#

这应该可以防止文本换行,但它会切断结束文本。也就是说,不会显示任何超过宽度的文本。
只需将其添加到现有类:

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

希望能有所帮助。

bwntbbo3

bwntbbo33#

enter image description here
我假设这是您的问题,如果是的话,您可以通过更改行高来解决它:60px像改变你想要的CSS属性 * line-height

相关问题