如何停止文本溢出DIV

我正在从头开始，并在我的导航栏中的网站，我有一个div到左侧，我有一个超链接在里面说“德韦恩·沃克”。如何停止文本溢出DIV

出于某种原因，它是“溢出”出来的div，我想它，因为我有在div对角线边框。以下是图像：

这里是我的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;}

谁能帮助我解决这个问题？

来源

2016-02-13 David Wade

在这里你去！

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


.logo { 
    height: 50px; 
    width: 200px; 
    border-top: 50px solid red; 
    border-right: 50px solid transparent; 
    position:relative; 
} 
.site-name { 
    position:absolute; 
    top:-50px; 
    left:0; 
}

来源

2016-02-13 10:40:16

您的锚文本只在div内。但是如果你需要在边界上的文字可见，那么你只需从你删除高度.logo格，因为没有必要的高度。然后执行下面的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>

您也可以选择不使用.logoposition:relative;，对于你将不得不的.logo atop属性设置为正值。

但它不是一个很好的做法为.logo a将成为相对于身体标记或有postion:relative

来源

2016-02-13 10:40:21 kanudo

一些额外的颜色，明确了最近的父是怎么回事：

.logo { 
 
    height: 50px; 
 
    width: 200px; 
 
    border-top: 50px solid red; 
 
    border-right: 50px solid green; 
 
    background-color: yellow; 
 
}

<div class="logo"> 
 
    <a href="http://something">Hi</a> 
 
</div>

不知道什么是最好的方法是实际上粘在文字上边界，但有可能是大量的解决方案和意见，哪些是最好的有（或者如果这甚至是“正确”的方法，使该标志的形状）。

我的想法可能是在实际链接周围添加一个margin-top: -50px内部容器，这可能是各种可怕的风格，但可能工作原理是一样的。

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

 
.logo-content { 
 
    height: 50px; 
 
    margin-top: -50px; 
 
    line-height: 50px; 
 
    padding: 0px 10px; 
 
}

<div class="logo"> 
 
    <div class="logo-content"> 
 
    <a href="http://something">Hi</a> 
 
    </div> 
 
</div>

来源

2016-02-13 10:47:57 user508633

我不知道究竟是什么的问题。，因为超链接正是它假设的地方。在DIV父母里面！

我猜你your'e试图把超链接里面的红色部分这是红色的顶部边界。如果是这样，可能通过使用定位是做到这一点的最有效的方式来完成：看我下面的代码：使用位置

.logo { 
 
      height: 50px; 
 
      width: 200px; 
 
      border-top: 50px solid red; 
 
      border-right: 50px solid transparent; 
 
      outline: 1px dotted green; 
 
      position: relative; 
 
     } 
 

 
.logo a { 
 
      position: absolute; 
 
      top: -35px; 
 
     }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
<div class="logo"> 
 
    <a href="index.html">Dwayne Walker</a> 
 
</div> 
 
</body> 
 
</html>

：子元素绝对是控制元素相对于具有position：relative \ absolute的第一个父元素的位置的最有效方法。

W3Schools的：

位置：绝对; 位置为absolute的元素;被定位为相对于最近定位的祖先（而不是相对于视口定位，如固定）。但是;如果绝对定位元素没有定位祖先，则它使用文档正文，并随页面滚动一起移动。

来源

2016-02-13 11:07:25 Yehudaz

如何停止文本溢出DIV

回答

相关问题