有这样一个需求,各个标签用行内元素(例如span)包裹(这样做往往是考虑到HTML语义),当容器宽度不足时,完整换行,即当行内剩余空间不足展示一个标签时,换行,而非标签内分断.
稍有常识的人一定知道,直接用span是不行的.
解决的方案当然也是十分简单,设置这些span的display属性为inline-block就可以了.
值得吐槽的是,chrome显示的行内元素的padding区域在出现换行的时候,会在每一行都显示,这样就会出现除最后一行外,其他行的内容会在”padding区域”(实际上并不是)显示,可能会对一些新手造成困扰.
Firefox显示正常.
2020-5-18
设置这些span的display属性为inline-block怎么就可以了呢？
是因为设置为inline-block的元素等同行内替换元素，无换行，就好比一个图片，图片怎么可能换行呢？当然这里说的换行不是指其内容不可换行，而是指其自身不可换行（比如匿名文本元素和普通的行内非替换元素自身就可以换行）
图画里 龙不吟虎不啸 小小书童可笑可笑