在响应式设计上将两个词放在一起

时间:2014-09-17 07:29:45

标签: html css

我有两个词需要一直粘在一起,因为它是公司的名称。该公司的名称是,例如,S Overflow。有时,第二个词“溢出”'在某些屏幕宽度上显示第二段。

Lorem ipsum dolor sit ammet遇见了S
溢出后果

有没有一种方法,无论屏幕尺寸如何,这两个单词会一直粘在一起?

Lorem ipsum dolor sit ammet遇到S Overflow
consectidur

4 个答案:

答案 0 :(得分:2)

如果它是由空格分隔的两个单词的问题,没有涉及特殊字符(如连字符),最简单和最健壮的方法是使用不间断空格,例如。

S Overflow

您也可以将名称包装在元素中并在其上设置white-space: nowrap。如果名称无论如何都包含在元素中,这是很方便的,例如,造型。

答案 1 :(得分:1)

我认为你的意思是白色空间:nowrap in css:

的CSS:

.doNotWrap {
   white-space: nowrap;
}

HTML:

Lorem ipsum dolor sit ammet met <span class="doNotWrap">S Overflow</span>
consectidur

答案 2 :(得分:1)

您可以使用

white-space:nowrap;

答案 3 :(得分:1)

您可以创建一些css规则来控制span标记中包含的公司名称,该标记具有固定宽度并且显示设置为阻止。

<span class="cName">company name</span>

检查fiddle here

另一种方法是使用媒体查询来确保公司名称显示在不同设备大小的一行上。