工作常用css知识备忘--文字篇

1.内容折行

解决方案：word-break:break-all

2.文字居中

解决方案：line-height

3.显示省略号

显示一行省略号解决方案：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

显示多行省略号解决方案：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

4.中文汉字和英文汉字默认是自动换行的，即使有width,height，但是连续的英文字母是不换行的

 纯 CSS 实现多行文字截断

<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of  Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon;  use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
<p class="block-with-text">Small text, less then one row. Without dottes.</p>
<p class="block-with-text" style=" 250px;">2.5 lines example: A towel is about the most massively useful thing an interstellar hitch hiker can have</p>

body {
  margin: 0;
  padding: 50px;
  font: 400 14px/1.2em sans-serif;
  background: white;
}

/* mixin for multiline */
.block-with-text {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

参考资料：

http://www.cnblogs.com/masita/p/5460777.html

http://www.daqianduan.com/6179.html

https://zhuanlan.zhihu.com/p/34326190

https://codepen.io/natonischuk/pen/QbGWBa