css不换行 超出省略号

CSS中的文字换行处理方式较多，其中不换行、超出后省略掉部分文字是一种比较常用的方式。在CSS中，实现这种效果主要需要用到下面两个属性。

white-space: nowrap; // 不换行
text-overflow: ellipsis; // 超出部分省略号 

white-space属性设置元素内空白的处理方式。nowrap是其中一种值，表示不换行。通过这个属性的设定，可以让文字在不到一行的宽度内全部显示出来。

但有时候内容过长，不可能全部显示在一行内。此时就需要用到text-overflow属性的值为ellipsis。该属性的作用是当文本溢出包含它的块级元素时，以省略号表示。同时，该属性前提条件是元素已设置了一个宽度或最大宽度。

overflow: hidden; // 超出部分隐藏
text-overflow: ellipsis; // 超出部分省略号
white-space: nowrap; // 不换行
width: 200px; 

除了以上两个属性之外，为了避免文字溢出，还需要将容器的宽度设置合理。例如，在width属性设置为200px的容器中，如果文字超过一行，就会出现省略号。同时，为了避免超出部分显示，还可以设置overflow属性为hidden来隐藏超出部分。

综上所述，CSS中的不换行、超出后省略掉部分文字需要同时使用white-space属性的nowrap值和text-overflow属性的ellipsis值，并设置合适的容器宽度，以实现预期效果。