Html CSS 中的重叠文本 - 如何更改它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16541112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlapping Text in CSS - How do I change it?
提问by ThePlague
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.
我正在尝试更改我的 css 文件中的重叠元素（文本）。一行文本（在常规浏览器中）在移动设备中显示为两行文本，重叠在一起。
This change is for the mobile version of the site (the @media section for landscape tablets)
此更改适用于网站的移动版本（横向平板电脑的 @media 部分）
Currently, the header (h2) text is overlapping on an iPad/tablet.
目前，标题 ( h2) 文本在 iPad/平板电脑上重叠。
Code from the h2 @mediasection:
来自 h2@media部分的代码：
.da-slide h2{
font-size: 36px;
width: 80%;
top: 40px;
padding: 18px 20px 18px 20px;
(The .da-slide h2is the component that holds this text in the html)
（.da-slide h2是在 html 中保存此文本的组件）
I tried the line-heightproperty but it didn't work?
我尝试了该line-height属性，但它不起作用？
Any ideas...
有任何想法吗...
回答by Romain
Are you sure that the line-height css property has been apply to your class?
您确定 line-height css 属性已应用于您的班级吗？
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; }
回答by STOP BIT
This should do it by preventing the text from wrapping, but it will cut off the end text. i.e. won't display any text longer than the width.
这应该通过防止文本换行来实现，但它会切断结束文本。即不会显示任何超过宽度的文本。
Just add it to existing class:
只需将其添加到现有类中：
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. */
Personally I like to use the ellipsis effect for long titles and tablet devices. Ellipsis trims the text and adds three dots where text has been trimmed.
我个人喜欢对长标题和平板设备使用省略号效果。省略号会修剪文本并在文本被修剪的地方添加三个点。
text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text continues */
Example of effect below:
效果示例如下：
This is an extremely long and completely unavoidable page title I need to show
This is an extremely long and completely unavoidable page title I need to show
这是我需要显示的非常长且完全不可避免的页面标题
Depending on width might display as:
根据宽度可能显示为：
This is an extremely long...
Hope that helps.
希望有帮助。
