css 元素换行产生空白间隙问题

html-css079

css 元素换行产生空白间隙问题,第1张

inline-block本身会自带空隙或者block块级元素和其他元素之间因为空白而产生间隔。

容器设置font-size:0子容器再设置font-size即可

如:

html结构举例:

<div id="box">

    <div>后面的span换行有空隙可根据下面的css设置修正</div>

    <span>测试</span>

</div>

css举例:

#box{font-size:0}

#box div{font-size:14px}

#box span{font-size:12px}

你是说不换行,只有一行,超出部分变为省略号或者说让比如“北京”这样的固定用词拆开?

如果是这样的话,css可以用:

text-overflow:ellipsis(超出部分变为省略号)

white-space: nowrap(文本不会换行,文本会在在同一行上继续,直到遇到 <br>标签为止)

word-break:break-all(允许在单词内换行,就是拆开固定用词的)

word-break:keep-all(只能在半角空格或连字符处换行)

word-wrap:break-word(允许长单词或 URL 地址换行到下一行,用于英文较多)

你的问题不是很明显,这是我理解的你的问题能想到帮到你的,你自己看看吧

css截取多行文字可以使用容器的超出隐藏来实现,注意:多行无法截取后面不会出现省略号;

1、因为要对其设定宽高,所以设置容器为block或者inline-block;

2、设置overflow:hidden让超出内容的部分不显示;

3、为了避免长单词,长的数字不换行,还需要对该容器设置:word-break:break-allword-wrap:break-word

这样就可以实现了文字的截取效果;

具体代码如下:

<style>

.wordwrap{width:100pxheight:36pxline-height:18pxfont:400 12px/1.5 Simsunoverflow:hiddenword-break:break-allword-wrap:break-word}

</style>

<div class="wordwrap">

    <span>文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取</span>

</div>