Question

我有一个从Expression Engine CMS动态生成的导航。我需要在屏幕上安装10个主要导航项目。然而，一些标题很长并且包裹到下一行或被切断。我增加了li元素的高度以允许两行，但它看起来并不好。应该只是一排。有没有办法用CSS改变长度或不突然切断？我尝试了文本溢出但我的Mozilla Firefox无法识别它。我可以更改标题，但页面标题不会完整。

Answer 1

你可以尝试使用它：

text-overflow: ellipsis;
white-space: nowrap;
-moz-white-space: nowrap;
overflow: hidden;

Answer 2

根据屏幕尺寸动态更改字体大小怎么样？这里使用媒体查询Responsive Font Size

讨论类似的内容

Answer 3

此CSS属性不会强制发生溢出;要执行此操作并使文本溢出应用，作者必须在元素上应用一些其他属性，例如将overflow设置为hidden。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

文字可能会溢出，例如当它被阻止包裹时（例如由于白色空间：nowrap＆＃39;或单个词太长而无法适应）。

http://dev.w3.org/csswg/css-ui-3/#text-overflow

要使用text-overflow属性，文本元素必须首先溢出。这可以通过阻止元素将溢出的内容包装到新行来完成，这可以通过设置white-space: nowrap来完成。此外，overflow必须设置为hidden。

以下是有关text-overflow和white-space之间互动的摘要：

＆＃13;

body {
  font-size: 9px;
  font-family: Helvetica, Arial, sans-serif;
}
p {
  font-size: 16px;
  width: 100px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  margin: 10px 0 0;
  text-overflow: ellipsis;
}
.a { white-space: normal; }
.b { white-space: nowrap; }
.c { white-space: pre; }
.d { white-space: pre-wrap; }
.e { white-space: pre-line; }

＆＃13;

<p class="a">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: normal
<p class="b">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: nowrap
<p class="c">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: pre;
<p class="d">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: pre-wrap
<p class="e">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: pre-line

＆＃13;

处理CSS文本溢出

3 个答案: