css 如何在使用网格时处理html中的长单词？

mepcadol 于 2023-07-01 发布在其他

关注(0)|答案(3)|浏览(120)

我已经创建了一个div使用显示网格有列结构。

<div id="two-column-structure">
    <div></div>
    <div></div>
</div>

样式使用CSS

div.two-column-structure {
    display: grid;
    grid-template-columns: 1fr 380px;
}

但是当我在第一列写一些大词，比如asdjlkasjdlkjsalkdjalskjdlkajsdlakjsdlkajsdlkasjdlkasjdlasjdlkfahskldhfalksdjhflakjsdhflaksjdhflkasaklsjdhfaklsdhflaksdhflkajsdhlafkjdshflkajfsdhlfkajshdlkfajhsdlfjashdlkfjashdlkjahskldsfjhalskdjf
布局有溢出-x和我的设计得到网状。
我知道谁会这么做，但我认为这可能是案件。

.two-column {
  display: grid;
  grid-template-columns: 1fr 380px;
  padding: 12px;
  border: 1px solid red;
  margin-bottom: 10px;
}

.two-column div {
  padding: 10px;
}

.two-column-i-tried {
  display: grid;
  grid-template-columns: 1fr 380px;
  padding: 12px;
  border: 1px solid green;
  margin-bottom: 10px;
}

.two-column-i-tried div:first-child {
  border: 1px solid blue;
  text-overflow: ellipse;
  overflow: hidden;
}

<div class="two-column">
  <div> slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg
  </div>
  <div>
    Right Column
  </div>
</div>

<div class="two-column">
  <div> 
    Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div
  </div>
  <div>
    Right Column
  </div>
</div>

<div class="two-column-i-tried">
  <div>  slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg
  </div>
  <div>
    Right Column
  </div>
</div>

<div class="two-column-i-tried">
  <div> 
    Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div
  </div>
  <div>
    Right Column
  </div>
</div>

在html代码段中，当我使用text-overflow和overflow处理长文本时，它不显示代码中所示的省略号

css

来源：https://stackoverflow.com/questions/76561867/how-to-handle-long-word-in-html-when-using-grid

3条答案

按热度按时间

ujv3wf0j1#

试试这个：

.two-column div {
  padding: 10px;
  word-break: break-word; 
}

CSS的word-break属性用于设置文本是否在内容框溢出的地方出现换行符。
更多关于财产的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

赞(0）回复(0）举报 2023-07-01

wlp8pajw2#

TheWorrier，试试这个，我们可以用text-overflow：“..."
.two-column-i-tried div：first-child {
边框：1 px纯蓝色;
溢出：隐藏;
文本溢出：“...";
}

赞(0）回复(0）举报 2023-07-01

wgx48brx3#

试试.**grid-template-columns：repeat（3，1fr）;**repeat（3，1fr）是创建3个等宽列。

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
    grid-gap: 20px; /* Sets the gap between grid items */
  }
  
  .grid-item {
    /* Define styles for the grid items */
  }
</style>

<div class="grid-container">
  <div class="grid-item">  divasldkjfalsdkjfa;lksdjf;lakjsd;lkafj;lskdjfa;lksdjfa;lksjdfa;lksjdfa;lksdjfa;lksdfjal;ksdjfa;lskdjfa;lksdjfa;lskdfja;lskdja;lskdjas;lkfa;lskdjfa;lksdjf;lasdkjfal;skdjfl;askdjfal;skdjfals;kdfja;lsdkfjalsdjalsdkjfa;lskdjfa;lsdkjfa;lskdjfal;sdkfja;lsdkfjas;ldkfjasl;kfjasdf
</div>
  <div class="grid-item">    Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div
</div>
  <div class="grid-item">Column 3</div>
</div>

赞(0）回复(0）举报 2023-07-01

我来回答

css 如何在使用网格时处理html中的长单词？

3条答案

相关问题

热门标签

最新问答