在一个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

如果将长字（如网站网址），以网格和文本不包含任何空白，比它将会延伸到你指定的网格宽度。当没有更多空间时，您可以使用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{width: 8.33%;}）。我认为这是违反你的CSS，而不是将宽度应用于类。

max-width: 1200px;应该适用于col-*包装，例如， for .row

Answer 2

为什么不让父div如下所示：display：block; position：relative（即.row {} not .row :: after {}） 然后列div为：display：inline-block;位置：相对;

或使用父DIV即.row {显示：表}和列格为{显示：表列}