文字未在CSS网格中自动换行 [英] Text not wrapping in CSS Grid

问题描述

我一直在尝试CSS Grid，一直坚持寻找最有效的方法来使文本环绕<div>元素，而<div>元素部分位于其他两个<div/>元素的顶部.基本上，就像下面的图片一样，我希望红色和蓝色div中的文本环绕已部分定位在其他两个元素的列和行中的黄色div.显然，这是基于Grid的布局，因此我对使用典型浮点数不感兴趣.如何使用CSS Grid达到此效果?

I've been experimenting with CSS Grid and am stuck on finding the most effective means to have text wrap around a <div> element that is positioned partially on-top of two other <div/> elements. Basically, like in the image below, I want the text in the red and blue divs to wrap around the yellow div that has been partially positioned in the columns and rows of the other two elements. Obviously, this is a Grid based layout, so I'm not interested in doing this with typical floats. How can I use CSS Grid to achieve this effect?

这是我的CSS和html:

Here is my css and html:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.red {
  background-color: red;
  grid-column: 1 / span 2;
  grid-row: 1 / span 4;
}

.blue {
  background-color: blue;
  grid-column: 3 / span 2;
  grid-row: 1 / span 4;
}

.yellow {
  background-color: yellow;
  grid-column: 2 / span 2;
  grid-row: 2 / 4;
}

<div class="grid">
  <div class="red">According to the Oxford English Dictionary, hello is an alteration of hallo, hollo,[1] which came from Old High German "halâ, holâ, emphatic imperative of halôn, holôn to fetch, used especially in hailing a ferryman."[5] It also connects the development
    of hello to the influence of an earlier form, holla, whose origin is in the French holà (roughly, 'whoa there!', from French là 'there').[6] As in addition to hello, halloo,[7] hallo, hollo, hullo and (rarely) hillo also exist as variants or related
    words, the word can be spelt using any of all five vowels.[8][9][10]</div>
  <div class="blue">The use of hello as a telephone greeting has been credited to Thomas Edison; according to one source, he expressed his surprise with a misheard Hullo.[11] Alexander Graham Bell initially used Ahoy (as used on ships) as a telephone greeting.[12][13]
    However, in 1877, Edison wrote to T.B.A. David, the president of the Central District and Printing Telegraph Company of Pittsburgh: Friend David, I do not think we shall need a call bell as Hello! can be heard 10 to 20 feet away. What you think? Edison
    - P.S. first cost of sender & receiver to manufacture is only $7.00.[14] By 1889, central telephone exchange operators were known as 'hello-girls' because of the association between the greeting and the telephone.[13][15] By 1889, central telephone
    exchange operators were known as 'hello-girls' because of the association between the greeting and the telephone.[13][15] </div>
  <div class="yellow">3</div>
</div>

推荐答案

您可以使用排除，但是只有Microsoft的Internet Explorer和Edge支持这些功能，并且应谨慎使用(目前，我们必须在属性前面加上-ms-才能使排除工作，但这并不总是以成功结尾) .简而言之，排除是内联流内容环绕的元素周围的区域.

You can use exclusions, but these are only supported by Microsoft's Internet Explorer and Edge and should be used with caution (for now, we have to prefix properties with -ms- for exclusions to work, but that doesn't always end in success). In a nutshell, an exclusion is an area around an element that inline flow content wraps around.

当元素的wrap-flow属性具有非auto的计算值时，该元素将被排除在外，因此示例可能为.p { wrap-flow: maximum }. wrap-margin属性用于设置排除区域周围的边距或偏移量.在这种情况下，您可以在CSS中放置.yellow { wrap-flow: both }，以允许其他div中的文本环绕黄色div.

An element becomes an exclusion when its wrap-flow property has a computed value other than auto, so an example might be .p { wrap-flow: maximum }. The wrap-margin property sets the margin or offset surrounding the exclusion area.In your case, you could put .yellow { wrap-flow: both } in your CSS to allow the text in the other divs to wrap around the yellow div.

wrap-flow: both

链接:教程，规范，教程

相关标签: html 标签的问题 css css3 css-grid

Related Tags: html css css3 css-grid

这篇关于文字未在CSS网格中自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！