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

【问题标题】：Overlapping Text in CSS - How do I change it?CSS 中的重叠文本 - 如何更改它？
【发布时间】：2013-05-14 10:43:44
【问题描述】：

我正在尝试更改我的 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 属性，但它不起作用？

任何想法...

【问题讨论】：

请在 jsfiddle 上复制问题。您将获得更快更好的答案。

标签： html css mobile twitter-bootstrap tablet

【解决方案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; }

【讨论】：

我也遇到过类似的问题，用line-height解决了

【解决方案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...

希望对您有所帮助。

【讨论】：