Question

我希望带有“游戏”类的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>

Answer 1

在padding上使用.games - 玩弄值，取决于您的内容。

Answer 2

使用50%更改边框半径，例如border-radius:50%;＆amp;删除padding :0;上的gameDescriptionHeading，然后添加padding:5%;

Work With 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;
}

Answer 3

  .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;     
    }

Answer 4

只需放置一些<br>。它会突破。所以只需将<br>放在应该有换行符的位置。如果你需要一个单词与侧面有更多的距离，请加上一些 ，这些会给你一个空间。就像你打空格键一样。

我希望这有效。

如何围绕我的文本制作圆形边界div？

4 个答案: