CSS常见样式

1，上传样式。
我们直到input自带的样式是丑的。这里我们介绍几种方法。

常规html中：

<input type="file" id="fileInput" style="display: none" (click)="fileUpload()">
  <label for="fileInput">上传文件</label>

<input type="file" id="fileInput" style="display: none" (click)="fileUpload()">
  <label onclick="document.getElementsById("fileInput").click()">上传文件</label>

angular中利用标识id:

<input type="file" #fileInput style="display: none" (click)="fileUpload">
  <label (click)="fileInput.click()">上传文件11</label>

2，常见不换行标签：
span、label、button等:常用来包裹icon等。

3，省略号样式。（这里不好写列子，自行悟）

<span style="position:absolute;left:0;top:0;border:2px solid red">
  <input type="file" #fileInput style="display: none" (click)="fileUpload">
  <div style="color: silver;padding-top: 0.5em;padding-left: 0.8em"><span style="color: red"> *</span>附件上传</div>
  <label (click)="fileInput.click()">+/+</label>
    <span style="width: 3px">1234567890</span>
  </span>

css样式自动左侧或者右侧缩略文本。
这个重点就是父节点的宽度，和子节点的宽度配合实现的。
比如一个输入框宽度为:50,其中的显示我们指定为20就可以了

.css {
/*常规*/
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:200px
/*指定缩略方向*/
direction:rtl /*ltr*/
text-align:;eft;
}