iview Select组件,文字没有居左的问题和Html空格问题

iview Select组件,文字没有居左的问题和Html,CSS空格问题

问题:文字没有在左边

原因:{{ item.label }}前有空格引起的

  <Select v-model="seachdata.levelId" filterable placeholder="选择级别">
        <Option v-for="item in levelList" :value="item.value" :key="item.value">
            {{ item.label }}</Option>
 </Select>

解决办法:将其放在一行

 <Select v-model="seachdata.levelId" filterable placeholder="选择级别">
    <Option v-for="item in levelList" :value="item.value" :key="item.value">{{ item.label }
    </Option>
 </Select>

HTML中的空格

              不断行的空白（1个字符宽度）
             半个空白（1个字符宽度）
             一个空白（2个字符宽度）
           窄空白（小于1个字符宽度）

css的空格:

white-space 属性设置如何处理元素内的空白。:

normal;就是正常，和不设置一样，连续空格和空行都只会显示一个空格。

nowrap;当我们的文本超出了文本域，文本就会自动折行，这个设置就是说不自动折行了，而是碰到换行标签<br />才换

pre;和方法一相同，将文本原样输出显示。当文本超出文本域时，不换行，会产生滚动条。

pre-wrap;保留空格和空行，但当文本超出文本域时，会自动换行。

pre-line;连续的空格会显示为一个空格，但保留连续的空行。

letter-spacing 属性增加或减少字符间的空白（字符间距）:

normal  默认。规定字符间没有额外的空间。
length  定义字符间的固定空间（允许使用负值）。
inherit 规定应该从父元素继承 letter-spacing 属性的值

word-spacing 属性增加或减少单词间的空白（即字间隔）:

normal  默认。定义单词间的标准空间。
length  定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。