首页宽度较短时多元列表出现长单词会导致样式错乱

HowieHz / halo-theme-higan-hz

适用于 Halo 2.0 的 Higan-Hz 主题，魔改于 theme-higan，侧重于更高的配置自由度与更激进的修改。

https://howiehz.top

MIT License

13 stars 1 forks source link

Closed HowieHz closed 5 months ago

HowieHz commented 5 months ago

HowieHz commented 5 months ago

猜测和多元列表创建概要的方式有关

HowieHz commented 5 months ago

HowieHz commented 5 months ago

检查后发现是overflow-wrap: break-word不能正常工作导致的 word-wrap: break-word并不能修复这个问题，因为他只是overflow-wrap的别称 word-break: break-all当然可以，但是有点得不偿失了

HowieHz commented 5 months ago

overflow-wrap: break-word 挺好的长单词优先放下一行，长单词超过一行长度就分长单词，可惜不生效 word-wrap: break-word 长的短的单词遇到边界直接分段，太呃呃了

HowieHz commented 5 months ago

发现grid范围正常，但是flex范围不正常

HowieHz commented 5 months ago

目前word-break: break-all;能解决，但是这个会导致短的单词也被分行

参考earth主题，遇到这种问题的解决方法是设置overflow为hidden

HowieHz commented 5 months ago

然而主题分行和overflow-wrap没啥关系，开关都没差别，这里决定换行的是text-wrap

HowieHz commented 5 months ago

但是单纯加一个overflow: hidden也不能解决问题，会导致除了链接以外的字也被hidden，而不是像earth主题换行

HowieHz commented 5 months ago

发现是flex的不同导致上面的问题

HowieHz commented 5 months ago

汗流浃背了，不是earth有而higan没有，而是higan有单earth没有把higan的这里的grid布局关掉就可以了

发现不仅要关那个grid，那个flex也要关掉，，，

HowieHz commented 5 months ago

排查发现 flex 那只需要删掉 items-start 这个class 就可以了

grid那只要开启就会导致有问题，所以说earth主题对grid的设置可能多了一些

HowieHz commented 5 months ago

把上层的布局都删了，然后发现是这个grid-cols-1影响的

HowieHz commented 5 months ago

grid-template-columns: repeat(1, minmax(0, 1fr)); !!

HowieHz commented 5 months ago

解决方案

在src\styles\main.css 加入

@media (max-width: 768px) {
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

以及posts模板去掉items-startclass

HowieHz commented 5 months ago