跟flex布局有关
原始代码
<div id="app">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="一致性 Consistency" name="1">
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
<div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
</el-collapse>
</div>
原始效果
修改之后
第一部分
<div id="app">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item name="1">
<span class="collapse-title" slot="title">一致性 Consistency</span>
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
<div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
</el-collapse>
</div>
第二部分
<style scoped>
.collapse-title {
flex: 1 0 90%;
order: 1;
}
</style>