Html 文本从<；p>；隐藏溢出并赢得的元素'；t中心

我试图从以下项目中创建菜单项，但我很难使段落元素中的文本响应其父元素。我尝试了所有的定位组合，以及各种可能的百分比和大小组合，但都没有按预期的方式工作

我只想让文本在圆圈内居中

.div-1{
显示：内联块；
利润率：0.15px；
边框：纯色1px蓝色；
填充：20px；
高度：80px；
宽度：80px；
边界半径：50%；
}

家

服务

节目

你可以看到我曾经实现过你想要的

.navbar文本{
显示器：flex；
证明内容：周围的空间；
}
.div-1{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：纯色1px蓝色；
填充：20px；
高度：80px；
宽度：80px；
边界半径：50%；
}

家

服务

节目

在这里，您可以使用flex box进行校准

.div-1{
显示器：flex；
利润率：0.15px；
边框：纯色1px蓝色；
填充：20px；
高度：80px；
宽度：80px；
边界半径：50%；
对齐项目：居中；
证明内容：中心；
}
.div-1 p{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

家

服务

程序DFSDS

我决定添加非弹性方法 您可以尝试使用文本对齐和行高。但这里有一个问题——它不支持多行。如果你想要长文本，那么使用flex

.div-1{
显示：内联块；
利润率：0.15px；
边框：纯色1px蓝色；
填充：20px；
高度：80px；
宽度：80px；
边界半径：50%；
文本对齐：居中；
线高：80px；
}
.div-1>p{
保证金：0；
}

家

服务

节目

文本实际上没有溢出

，因为它仍然有一个较大的矩形框，文本包含在其中（使用

大纲：

查看它，而不是

边框

）。非常感谢您的帮助，直到现在我才意识到大纲和边框之间的区别。。。大多数情况下，我一直在使用border做任何事情。我也尝试过flex，但它对flex不起作用。仍然有溢出，什么都没有改变，我甚至把！这很重要，以防引导程序推翻它。老实说，我不知道它有什么问题。你可以看到上面的代码是有效的，如果它在你的情况下不起作用，那么你需要仔细查看你的浏览器控制台，看看到底是什么在覆盖它。它可能是常规

div

或

p

标签上的一些样式。如果不知道应用程序中代码的结构，很难给你一个更好的答案。当然，我做了一些实验并使它工作了：）非常感谢！Flexbox不起作用，我已经试过了，即使用了！重要的。它没有改变任何东西，溢出仍然在p元素外可见，甚至在圆圈外可见，就像图中一样

.div-1 {
    display: flex;
    margin: 0 15px;
    border: solid 1px blue;
    padding: 20px;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    align-items:center;
     justify-content: center;
}

.div-1 p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}