行内元素不换行的处理

1、代码

    

        

            
亚洲
            
欧洲
            
北美洲
        
        

            
中国
            
美国
            
印度
            
日本
        
    

2、不想要的效果

3、上图看得出已经换行了，不是我想要的效果；

为什么会换行？

两个原因，第一：父元素宽度限制为100px，我们的内容可不止这么点宽度；第二：white-space的默认取值为normal,什么意思呢？父元素宽度不够时换行呗;

那么我想让它不换行该怎样做呢？

white-space:nowrap;这行css代码什么意思？文本不会换行，文本会在同一行上继续，直到遇到
标签为止。

4、正确代码

    

        

            
亚洲
            
欧洲
            
北美洲
        
        

            
中国
            
美国
            
印度
            
日本
        
    

就是加了white-space:nowrap;而已。

5、正确的效果

6、max-content

也可以使用width:max-content达到相同效果

兼容写法

 width: -moz-max-content;
  width: -webkit-max-content;
  width: -o-max-content;
  width: -ms-max-content;
  width: max-content;

7、项目效果