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

Question

我的目标是显示最多 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>

Answer 1

在文本的父级添加这个

div {
  word-wrap: break-word;
}

如果没有更多的空间留给下一个单词，这将使句子中断，并且它将转到新行。您可以阅读更多相关信息 here