Hexo-theme-next: Break word 样式影响了移动设备上英文文章显示效果
Expected behavior (预期行为)
文章按照单词换行。
Actual behavior (实际行为)
文章从任意位置换行。
Steps to reproduce the behavior (重现步骤)
可在任意英文文章上重现。
有关联的文件：
hexo-theme-next/source/css/_common/components/post/post-title.styl
hexo-theme-next/source/css/_common/components/post/post.styl
当时加入 word-break: break-all; 应该是为了防止页面被撑开。不知道有没有更好的解决方法，让文章优先按照单词换行，否则才从任意位置换行。
NexT Version, NexT Scheme
NexT Version:
- [x] Master
- [ ] Latest Release
- [ ] Old version -
NexT Scheme:
- [ ] Muse
- [x] Mist
- [ ] Pisces
Other Information (Like Browser, System, Screenshots)
Mobile Chrome for Android.
Haocen
All 10 comments
嗯，就是为了解决被撑开的问题，虽然暴力，但是很有效。不知道是否有更好的方法
iissnan
on 28 Mar 2016
我最近花了很多时间研究 bootstrap ，它的解决方案是允许表格在较窄的显示设备上横向滚动。我抽空做下修改看看，如果理想的话就提交上来。
Haocen
on 16 Apr 2016
同样纠结这个问题啊，英文文章在手机端显示的时候，常常把单词切割了，一部分在上一行末尾，一部分在下一行开头，这个很麻烦啊，能解决一下么？
urzone
on 23 Apr 2016
@urzone 不好意思啊。最近有点忙。目前的话，似乎只要对 <code> 和 <table> 元素支持横向滚动就足够了。我应该这两天能够提交一个修改。
Haocen
on 23 Apr 2016
@urzone 我有一个好消息和一个坏消息。
好消息是，只需要修改：
hexo-theme-next/source/css/_common/components/post/post.styl
这个文件，将：
word-break: break-all;
改为：
word-break: break-word;
就可以了。
对于表格内容太长撑开页面的问题，可以修改：
hexo-theme-next/source/css/_common/scaffolding/tables.styl
将：
word-break: break-word;
改为：
word-break: break-all;
就可以解决目前遇到的问题。
坏消息是，目前 next 两处需要使用 word-break: break-all; 的地方，一处是 <table> 一处是 <code> 这两者如果需要实现水平滚动，需要被包裹在其他元素当中，比如 <p> 或者 <div> 才行，这个涉及到对页面生成模板的修改，也不清楚会不会引致其他问题。
Haocen
on 23 Apr 2016
844
Haocen
on 23 Apr 2016
哇哦，辛苦兄台了，感谢提供的信息，多谢！！！
On 24 Apr 2016, at 00:41, Haocen [email protected] wrote:
@urzone 我有一个好消息和一个坏消息。
好消息是，只需要修改：
hexo-theme-next/source/css/_common/components/post/post.styl
这个文件，将：
word-break: break-all;
改为：
word-break: break-word;
就可以了。
对于表格内容太长撑开页面的问题，可以修改：
hexo-theme-next/source/css/_common/scaffolding/tables.styl
将：
word-break: break-word;
改为：
word-break: break-all;
就可以解决目前遇到的问题。坏消息是，目前 next 两处需要使用 word-break: break-all; 的地方，一处是
一处是
这两者如果需要实现水平滚动，需要被包裹在其他元素当中，比如或者
才行，这个涉及到对页面生成模板的修改，也不清楚会不会引致其他问题。—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub经过修改，单词不会被截断，但是在手机端不会显示为 justfy 的对齐了？
例如：
@urzone 不知为何只有 Pisces 主题的
post-body在移动端是 justify 对齐。这个要问一下作者。
相关文件：
source/css/_schemes/Pisces/_posts.styl@Haocen Thx a lot for your advice!
evanwang1021 on 10 Dec 2016
Was this page helpful?0 / 5 - 0 ratingsRelated issues
chy9002 · 3Comments
keltoy · 3Comments
YorksonChang · 3Comments
zhgcao · 3Comments
liyuan989 · 3Comments
Most helpful comment
@urzone 我有一个好消息和一个坏消息。
好消息是，只需要修改：
hexo-theme-next/source/css/_common/components/post/post.styl
这个文件，将：
word-break: break-all;
改为：
word-break: break-word;
就可以了。
对于表格内容太长撑开页面的问题，可以修改：
hexo-theme-next/source/css/_common/scaffolding/tables.styl
将：
word-break: break-word;
改为：
word-break: break-all;
就可以解决目前遇到的问题。
坏消息是，目前 next 两处需要使用 word-break: break-all; 的地方，一处是
<table>一处是<code>这两者如果需要实现水平滚动，需要被包裹在其他元素当中，比如<p>或者<div>才行，这个涉及到对页面生成模板的修改，也不清楚会不会引致其他问题。