html - css 网格中的长文本不会内联

Question

view when testing the grid我制作的网格适用于小行文本，但当我添加长文本时，它与其余文本不一致。我怎样才能使文本适应网格的大小而不是相反？

.row:after{
  content: "";
  clear: both;
  display: inline;
}
[class*='col-']{
  padding: 15px;
  float: left;
  max-width: 1200px;
}

.col-1{width: 8.33%};
.col-2{width: 16.66%};
.col-3{width: 25%};
.col-4{width: 33.3%};
.col-5{width: 41.66%};
.col-6{width: 50%};
.col-7{width: 58.33%};
.col-8{width: 66.66%};
.col-9{width: 75%};
.col-10{width: 83.33%};
.col-11{width: 91.66%};
.col-12{width: 100%};

<div class="row">
  <div class="col-4">
    <p>hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
      hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
      hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
    </p>
  </div>
  <div class="col-4">
    <p>some text hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
      hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
      hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl</p>
  </div>
  <div class="col-4">
    <p>hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
      hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
      hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughugh
      vjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbs
      sfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl</p>
  </div>
</div>

Answer 1

如果向网格添加长词(如站点 URL)并且该文本不包含任何空格，那么它将超出您指定的网格宽度。您可以使用 word-break: break-all 在没有更多空间时强制断开单词。不利的一面是，即使是简短的单词也会在任何地方中断。但是您只能将其应用于某些特定标签(例如链接或具有特定类别的跨度)。

* {
  box-sizing: border-box;
}
.row:after {
  content: "";
  clear: both;
  display: inline;
}
[class*='col-'] {
  padding: 15px;
  float: left;
  word-break: break-all;
  max-width: 1200px;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.3%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

<div class="row">
  <div class="col-4">
    <p>hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughughvjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbssfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdlhfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughughvjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbssfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdlhfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughughvjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbssfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
    </p>
  </div>
  <div class="col-4">
    <p>hfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughughvjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbssfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdlhfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughughvjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbssfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdlhfjfhufhsdjbdjfhefhjdvhjdghuzghsjhsdghghegheroghroghrogheugverugrughughvjsdbvjsvjsdbvjvbsjvbjsbvjnffgflkvlksvnfsjbjkfghsghsvsdvshvsvjsvsvbsvbsvbssfshvsjvjsvjfvjfjfsvnsvsdhosdhgusohuspghuhsnvnsdvnsdlvnsdlvnsdlvnsdklvnsdl
    </p>
  </div>
  <div class="col-4">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper quis justo posuere maximus. Curabitur porta dui vitae risus convallis, in tincidunt neque pretium. Sed aliquet massa et dictum sagittis. Cum sociis natoque penatibus et magnis
      dis parturient montes, nascetur ridiculus mus. Sed eleifend lacus nulla, et suscipit massa suscipit vitae. Sed vel felis ac leo convallis ultricies. Donec eget metus malesuada, finibus lectus id, finibus felis. Suspendisse dolor velit, egestas ut
      aliquet et, tempus nec dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In pulvinar egestas odio. Sed condimentum, turpis at dignissim sollicitudin, purus enim pretium ante, at sollicitudin augue tortor
      nec magna. Mauris interdum diam a ultrices rutrum. Suspendisse mi quam, auctor ut neque quis, suscipit congue sapien. Donec luctus ac magna at euismod. Fusce ut massa at magna porttitor dignissim. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus. Ut sed felis arcu. Curabitur pellentesque ex nisl, non auctor dui scelerisque vel. Curabitur arcu lorem, facilisis quis felis at, posuere tempor dolor. Nunc magna orci, molestie et lorem eu, tincidunt sollicitudin
      nisl. Fusce non velit ex. Sed lacinia sollicitudin odio id cursus. In cursus nunc id nibh aliquam euismod. Vestibulum sollicitudin lectus in sem gravida venenatis. Sed orci nulla, finibus et finibus vel, scelerisque eget nisi. Curabitur tempor,
      urna non dignissim vehicula, mi nulla ultricies est, eget ullamcorper turpis tellus eu dolor. Proin tincidunt, felis ac euismod condimentum, mauris odio venenatis turpis, nec sodales turpis diam sed nunc. Aenean lacinia metus metus, in sodales nulla
      vestibulum vitae. Donec tempor rhoncus nibh ac dictum. Mauris vitae tincidunt augue. Praesent elementum velit nec dui suscipit iaculis. Etiam hendrerit rutrum leo eu sollicitudin. Quisque in elit eu sapien dignissim lacinia eget non mauris. Duis
      blandit erat sit amet auctor fermentum. Phasellus ac finibus eros. Nam vulputate justo a urna interdum, vitae vehicula augue porttitor. Donec non mi placerat, laoreet erat et, maximus arcu. Sed non lacus dui. Donec vulputate eros sed elit blandit,
      eu iaculis enim faucibus. Vestibulum aliquam dolor id urna volutpat, id venenatis dui feugiat. Integer gravida sed neque ut consectetur. Phasellus non risus quis purus ullamcorper volutpat. Fusce laoreet urna et purus cursus, sed tincidunt risus
      vestibulum. Integer aliquet ligula vel cursus scelerisque. Duis massa ipsum, blandit a urna a, tincidunt laoreet sem. Mauris pellentesque lorem et tincidunt sagittis. Sed rhoncus feugiat sem, at ultrices velit porta non. Donec vitae elit fermentum,
      pulvinar ex nec, commodo justo. Duis eget augue nisl. Quisque viverra nulla eros, at ullamcorper neque cursus ullamcorper. Etiam mauris nunc, bibendum feugiat enim sit amet, tincidunt pellentesque tellus. Nullam malesuada quis nisi sed mollis. Etiam
      auctor arcu ac tellus consequat egestas. Aliquam ac egestas erat, ultrices consequat dui. Ut eget augue id arcu scelerisque molestie. Ut venenatis lacus eget tincidunt pretium. Integer id pretium mauris, ac egestas mi.
    </p>
  </div>
</div>

---

边注:

当使用网格和应用填充时，请始终使用 box-sizing: border-box 以便 % 中的宽度将包含内容宽度和填充。

您的 CSS 有错误。 ; 在 之外是错误的(比如 .col-1{width: 8.33%}; 必须是 .col-1{宽度:8.33%；)。我认为这破坏了您的 CSS 并且没有将宽度应用于类。

max-width: 1200px; 应应用于 col-* 包装器，例如对于 .row