如何使内联元素超过长度不换行？

Question

知乎邀请栏里面有个这样的东东，头像和名字都是内联元素，而名字超过长度了还没有换行，我想知道它如何实现的，我找了一个多小时，把相关的属性都试了试，但始终还是会换行，想请教一下大家。

---

无意中解决了。
是white-space:nowrap;的问题，之前没有加到父元素上导致出错。之前以为这个是加到子元素上的，犯错了，谢谢大家。

Answer 1

p{white-space:nowrap;}

规定段落中的文本不进行换行。

Answer 2

看见你回复了上一个答案又来了………………

使用属性

p {
    white-space: nowrap;/* 阻止换行 */
    text-overflow: ellipsis;/* 溢出部分使用省略号代替 */
    overflow: hidden;/* 这个刚才忘记了…… */
}

你的图片和文字需要都是inline元素。

父元素也要定宽才好

推荐

img, a {
    display: inline-block;
    vertical-align: middle;
}

Answer 3

当前元素找不到相关样式，就一层一层往父级元素、祖先元素上去找