由于一行文本溢出隐藏，导致的后面元素对齐的问题

文本溢出隐藏

1. 一行文本溢出隐藏

1.html
	<div class="username">一行文本溢出隐藏了</div>
2.css
  .username{
	  width: 62px;
	  word-break:keep-all;/* 不换行 */
	  white-space:nowrap;/* 不换行 */
	  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
	  text-overflow:ellipsis;
  }

2. 解决一行文本溢出隐藏导致后面的元素对齐问题
   注：这个不对齐的问题是overflow：hidden引起的

1.html
		<div class="username"> <span>{{ item.name }}</span> </div>
2.css
	  .username {
	 		font-size: 16px;
	    	width: 62px;
	   }
	  .username span{
		 	display: block;
		 	width: 62px;
		 	word-break:keep-all;/* 不换行 */
		  	white-space:nowrap;/* 不换行 */
		  	overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
		 	 text-overflow:ellipsis;
	  }

多行类似的。
这个解决方法常在自定义表单，或者多行内容需要对齐的，里面使用了文本溢出隐藏的问题
这让我想起了关于文本溢出的另外一个问题，文本溢出隐藏失效的问题。先写到这儿。