如何停止文本溢出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

回答

相關問題