堆棧內存溢出
  簡體   English   中英

如何在文本周圍制作圓形邊框的div？

[英]How do I make a round bordered div wrap around my text?

 原文  2016-06-24 00:44:05  3   4    html/ css

問題描述

我希望帶有“游戲”類的div環繞/環繞我的para，以便每個單詞在到達圓角時都會中斷，並且沒有任何內容是不可見的。

我怎么做？ 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="metacore.css"/>
    <link rel="stylesheet" href="../font-awesome-4.6.3/css/font-awesome.css" />
  <style>

    #gamesContainer {
      margin-top:120px;
      margin-bottom:100px;
    }

    .games {
      overflow:hidden;
      width:65%;
      height:450px;
      border-radius:250px;
      -webkit-filter:grayscale(100%);
      margin:0 auto;
      box-shadow:-30px 30px 30px 2px black inset;
      position:relative;
    }

    .singleGame .gameName {
      display:table;
      color:black;
      font-family:basics;
      font-size:50px;
      margin:0 auto;
      margin-bottom:30px;
      text-shadow:0 1px 0 white,0 3px 0 grey,1px 4px 0 white;
    }

    #ourGames {
      text-shadow:0 1.5px 0 white,0 4.5px 0 grey,1.5px 6px 0 white;
      color:black;
      font-size:80px;
      font-family:basics;
      color:black;
      margin-left:50px;
      margin-bottom:120px;
      padding-bottom:25px;
      border-bottom:6px groove #464646;
      box-shadow:0 2px 0 white,0 3px 0 grey;
    }

    .gameDescriptionBackground {
      width:100%;
      height:100px;
      background-color:black;
      opacity:.9;
      position:absolute;
      bottom:0;
    }

    .gameDescription {
      width:80%;
      height:100px;
      position:absolute;
      bottom:0;
      left:50%;
      transform:translate(-50%);
      overflow:hidden;
    }

    .gameDescriptionHeading {
      color:white;
      margin:0;
      padding:0;
      font-family:basics;
      text-transform:uppercase;
      text-shadow:0 2px 0 black, 0 3px 0 grey,0 4px 0 black;
    }

    .gameDescriptionPara {
      color:white;
      text-transform:uppercase;
      text-wrap:unrestricted;
      font-family:basics;
      font-size:13px;
      padding-left:30px;
    }
  </style>
</head>
<body>
  <div id="navBarContainer">
    <ul id="topNav">
      <li><a href="metacore.html">Home</a></li>
      <li><a href="#" style="color:black;background-color:#cac9c9;">Games</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
  </div> 
  <div id="gamesContainer">
    <h1 id="ourGames">Our Published Games:</h1>
    <div class="singleGame">
      <h1 class="gameName">Vain Instinct</h1>
      <div class="games" style="background:url('game1.jpg') -120px -50px">
        <div class="gameDescriptionBackground"></div>
          <div class="gameDescription">
            <h2 class="gameDescriptionHeading">Best Selling Ios Game In 2017</h2>
            <p class="gameDescriptionPara">This Was Our First Game, it revolves around the story of around the story of a band of teenagers survive the dangers of an environment where beast and man alike are your enemies, the game was named an example of excellent storytelling and a dramatic gaming experience</p>
          </div>
        </div>
      </div>
    </div>
    <div id="socialContainer" >
      <a href="#" target="_blank"><i class="fa fa-facebook" style="background-color:#3b5998;"></i></a>
      <a href="#" target="_blank"><i class="fa fa-github" style="background-color:#212121;"></i></a>
      <a href="#" target="_blank"><i class="fa fa-google" style="background-color:#d62d20;"></i></a>
      <a href="#" target="_blank"><i class="fa fa-twitter" style="background-color:#2ba7e3;"></i></a>
      <a href="#" target="_blank"><i class="fa fa-vk" style="background-color:#44678d;"></i></a>
    </div>
    <script>
    </script>
  </body>
</html>

4 個解決方案

解決方案1
 0  2016-06-24 00:51:23

在.games上使用padding -根據您的內容來.games該值。

解決方案2
 0  2016-06-24 01:34:18

將邊界半徑更改為50%例如border-radius:50%; ＆刪除padding :0; 在gameDescriptionHeading然后添加padding:5%;

使用jsfiddle 

#gamesContainer {
margin-top:120px;
margin-bottom:100px;
}

.games {
overflow:hidden;
width:65%;
height:450px;
border-radius:50%;
-webkit-filter:grayscale(100%);
margin:0 auto;
box-shadow:-30px 30px 30px 2px black inset;
position:relative;
padding-top:10%;
}

.singleGame .gameName {
display:table;
color:black;
font-family:basics;
font-size:50px;
margin:0 auto;
margin-bottom:30px;
text-shadow:0 1px 0 white,0 3px 0 grey,1px 4px 0 white;
}

#ourGames {
text-shadow:0 1.5px 0 white,0 4.5px 0 grey,1.5px 6px 0 white;
color:black;
font-size:80px;
font-family:basics;
color:black;
margin-left:50px;
margin-bottom:120px;
padding-bottom:25px;
border-bottom:6px groove #464646;
box-shadow:0 2px 0 white,0 3px 0 grey;
}

.gameDescriptionBackground {
width:100%;
height:100px;
background-color:black;
opacity:.9;
position:absolute;
bottom:0;
}

.gameDescription {
width:80%;
height:100px;
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
overflow:hidden;
}

.gameDescriptionHeading {
padding-left: 5%;
color:white;
margin:0;
font-family:basics;
text-transform:uppercase;
text-shadow:0 2px 0 black, 0 3px 0 grey,0 4px 0 black;
}

.gameDescriptionPara {
color:white;
text-transform:uppercase;
text-wrap:unrestricted;
font-family:basics;
font-size:13px;
padding-left:30px;
}

解決方案3
 0  2016-06-24 01:39:30

  .games {
    overflow:hidden;
    width:65%;
    height:450px;
    border-radius:250px;
    -webkit-filter:grayscale(100%);
    margin:0 auto;
    box-shadow:-30px 30px 30px 2px black inset;
    position:relative;
    /* THIS IS THE MISSING STYLE */
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;     
    }

解決方案4
 0  2016-06-26 18:04:12

只需放置一些<br> 。 它會換行。 因此，只需將<br>放在應該有換行符的位置。 而且，如果您需要一個單詞讓側面有更多距離，請輸入一些&nbsp; 這些將為您提供空間。 就像您按空格鍵一樣。

我希望這行得通。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使文本環繞div或span元素？ 如何使此嵌套的div顯示在右上角並使文本環繞它？ 如何使文本環繞重疊的div標簽 如何讓我的圖像環繞我的文本？ 如何使文字環繞圖像？ 如何使文字環繞jssor圖像滑塊？ 如何在div中使文本環繞在另一個包含img和文本的div中 如何讓我的文字換行 <div> 邊界半徑大 如何在div周圍包裝文本？ 如何不在DIV周圍包裝文字？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM