[英]CSS way to restrict line break for text
I have maybe a little bit strange task, but I belive there is no better solution. 我可能有点奇怪的任务,但我相信没有更好的解决方案。 I need to have
<ul>
in some container which width is changeable and with inlined <li>
elements of fixed width. 我需要在某个容器中有
<ul>
,宽度可以更改,并且内联<li>
固定宽度的元素。 I should (and already found solution) put spaces between <li>
elems of same width. 我应该(并且已经找到解决方案)在相同宽度的
<li>
元素之间放置空格。 Width of spaces is changes dynamicaly and depends of parental container width. 空间宽度是动态变化,取决于父容器宽度。 Again, this
<li>
items have fixed width. 同样,这个
<li>
项目具有固定的宽度。
I also should place some links above this described elements. 我还应该在这个描述的元素之上放置一些链接。 For some reasons links must be in other
<ul>
element. 由于某些原因,链接必须在其他
<ul>
元素中。 They also wrapped in inlined <li>
elems. 他们还包括内联的
<li>
元素。 And I want them to be positioned right above described <li>
items. 我希望它们位于所描述的
<li>
项目的正上方。 This can be done by setting fixed width of <li>
items as above. 这可以通过如上设置
<li>
项目的固定宽度来完成。 Now, the problem is that text in every link is actualy have different width and will break into two lines, but I must place it into one line. 现在,问题是每个链接中的文本实际上具有不同的宽度并且会分成两行,但我必须将它放在一行中。
So I want to trick browser: text will be overflowing <li>
items. 所以我想欺骗浏览器:文本将溢出
<li>
项目。
.liElem {
width: 100px;
height: 20px;
overflow: visible;
}
But, as you may guess, text is breaking into two lines and overflowing actually the bottom of list items, not the right side. 但是,正如您可能猜到的那样,文本分为两行,实际上是列表项的底部,而不是右侧。
The effect I wanted can be done by inserting
我想要的效果可以通过插入
来完成
insted of spaces in text like this: <li><a href="#">Add to Favourites</a></li>
. 在这样的文本中插入空格:
<li><a href="#">Add to Favourites</a></li>
。
So, my question is this: how in css-way make usual text NOT to break into several lines ? 所以,我的问题是:如何以css方式使通常的文字不要分成几行?
.nobr { white-space:nowrap; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.