html - 如何阻止文本溢出 div

Question

我正在从头开始制作一个网站，在我的导航栏中，左侧有一个 div，其中有一个超链接，上面写着“Dwayne Walker”。

出于某种原因，它从 div 中“溢出”，我认为这是因为我在 div 中有一个对 Angular 线边框。这是一张图片:

这是我的 HTML:

<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>

这是我的 CSS:

.logo {
height: 50px;
width: 200px;
border-top: 50px solid red;
border-right: 50px solid transparent;}

谁能帮我解决这个问题？

Answer 1

您的 anchor 文本仅位于 div 内。但是，如果您需要文本在边框上可见，那么您只需从 .logo div 中删除高度，因为不需要高度。然后实现下面的css，就大功告成了。

您可以通过运行代码片段查看输出。

.logo {
    width: 200px;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    position: relative;
}

.logo a {
  position:absolute;
  top: -35px;
  left: 25px;
  color: #fff;
  }

<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>

You can also choose not to use position:relative; in .logo, for that you will have to set top property of .logo a to positive value.

But it is NOT a good practice as the .logo a will become relative to body tag or the nearest parent having postion:relative