Html CSS样式在第一行剪切文本，不显示VueJS应用程序上的所有内容

我的目标是在卡片上显示最多5行的文本，然后在下面放一个页脚。我确实制作了这个样式，它可以在一个文件中测试代码，但是当我把它放在我的整个页面上时，它就不起作用了。文本剪辑在第一行

{{obra.nome}}
信息中的数据
{{obra.dataInicio}}
Área
{{obra.area}}}m2
护墙板
这篇课文没有完全展示出来
asdasdasd
asdasdasdasda
阿斯达斯达斯德
导出默认值{
名称：“卡多布拉”，
道具：{
obra：对象
}
};
.md卡{
宽度：320px；
高度：500px；
利润率：16px；
垂直对齐：顶部；
}
.md列表{
填充：10px；
溢出：可见；
}
.md卡内容{
填充：0px；
}
属性{
字体大小：20px；
字体系列：“Helvetica”；
颜色：灰色；
}
属性内容{
利润上限：3倍；
显示：块；
颜色：黑色；
字体大小：粗体；
溢出：隐藏；
文本溢出：省略号；
显示：-网络工具包盒；
-webkit线夹：5个；
-网络工具包盒方向：垂直；
}

在文本的父级上添加此

div{
单词包装：打断单词；
}

---

这将使句子中断，若并没有更多的空间留给下一个单词，它将转到新行。你可以阅读更多关于它的内容

我做了，但不管用。还尝试添加了

md列表项

和

attr

样式，但效果不佳。

<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>