网页文字换行问题求教

sayori · 2012-06-26T06:48:53Z

https://ww1.sinaimg.cn/large/a74e55b4jw1dubk964ziwj.jpg https://ww3.sinaimg.cn/large/a74ecc4cjw1dubk9f60j3j.jpg 为何行尾会出现空格？查了一下相关 CSS 、不知道怎么改求教。

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 5246 days ago, the information mentioned may be changed or developed.

为何行尾会出现空格？查了一下相关 CSS 、不知道怎么改求教。

求教

行尾

CSS

16 replies • 1970-01-01 08:00:00 +08:00

krazy

Jun 26, 2012

文本过长？
试试word-break: break-all;

lianghai

Jun 26, 2012

你连示例页面都不给，谁知道具体是什么情况。

永远不要用 word-break: break-all，除非你完全不需要标点避头尾，也可以接受恶心的西文单词自由断行。

tuoxie007

Jun 26, 2012

@lianghai 那也没办法，前几天遇到一个超长文本，全是英文字符，中间没有空格，然后就就横着出去了，然后我就被说了

NemoAlex

Jun 26, 2012

@tuoxie007
@lianghai 使用 overflow-wrap(又名word-wrap):break-word 是比较好的选择

sayori

Jun 26, 2012

@lianghai 感谢

这个是我本地学习实验遇到的

刚才发现是 PADDING-RIGHT 设置得小了。改成超过字体大小的值就搞定了。

okidogi

Jun 26, 2012

text-align: justify

lianghai

Jun 26, 2012

@tuoxie007: 如 @NemoAlex 所说。

lianghai

Jun 26, 2012

@sayori: 啊？padding-right 和这个有什么关系？

sayori

Jun 26, 2012

@lianghai 我也不知道....这些文字是放在一个<li>里的
然后右边距原来是3PX 就像这样有空格改成12PX 就行了。

sayori

Jun 26, 2012

不对我再看了下还是不行。
再研究看看。

sayori

Jun 26, 2012

难道这个是不能解决的，看了下饭否和新浪微博也有这种换行都不能完美对齐呢。

zsdsz

Jun 26, 2012

@sayori 应用是受标点符号影响吧看V2ex右边的广告也这样

NemoAlex

Jun 26, 2012

@zsdsz 如果要左右对齐，可以使用 text-align: justify
注意应用的元素的 display 要是 block ，inline 是无效的

lianghai

Jun 26, 2012

@sayori: 大家热心想帮你解决问题，你却连个示例页面或代码都不给，只知道在那里自言自语。真是无法理解。

benzhe

Jun 26, 2012

LZ 想要的是这个？

text-align: justify;
letter-spacing: normal;
white-space:normal;
display: block;
word-break: break-all;
word-wrap: break-word;

另外如果中英混合，这么做貌似十分恶心

sayori

Jun 26, 2012

谢谢大家不是我不发代码是根本没有代码。
只是随便复制了一段文字到本地装的WP里发布就出现的状况。127.0.0.1我也没法啊。
就是一段简单的<li><a>....<a></li>并且没有非常规的CSS语句在控制。
我看了新浪微博和饭否，他们的换行也有这种问题。
好吧是我问得找了，等我把这个传到互联网再问就对了。。

网页文字换行问题 求教

网页文字换行问题求教