我的目标是显示最多 5 行的文本以适合卡片,然后能够在其下方放置一个页脚。我确实制作了样式并且它在一个文件中工作以测试代码,但是当我将它放在我的完整页面上时它就不起作用了。文本被剪裁在第一行。
<template>
<div>
<md-card>
<md-toolbar :md-elevation="1">
<span class="md-title">{{obra.nome}}</span>
</md-toolbar>
<md-card-content>
<md-list>
<md-list-item>
<attr>
Data início
<attr-content>{{obra.dataInicio}}</attr-content>
</attr>
</md-list-item>
<md-list-item>
<attr>
Área
<attr-content>{{obra.area}} m2</attr-content>
</attr>
</md-list-item>
<md-list-item>
<attr>
Dados gerais
<attr-content>
this text is not showed completely
asdasdasdasd
asdasdasdasddasdasda
asdasdasd
</attr-content>
</attr>
</md-list-item>
</md-list>
</md-card-content>
</md-card>
</div>
</template>
<script>
export default {
name: "CardObra",
props: {
obra: Object
}
};
</script>
<style scoped>
.md-card {
width: 320px;
height: 500px;
margin: 16px;
vertical-align: top;
}
.md-list {
padding: 10px;
overflow: visible;
}
.md-card-content {
padding: 0px;
}
attr {
font-size: 20px;
font-family: "Helvetica";
color: gray;
}
attr-content {
margin-top: 3px;
display: block;
color: black;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
</style>
最佳答案
关于html - CSS 样式在第一行剪切文本并且不显示 VueJS 应用程序上的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58783207/