zoukankan      html  css  js  c++  java
  • 换行+省略号

    只是Mark一下,不是正规文章。

    换行问题

    word-break: 规定自动换行的处理方法

    word-break break-all keep-all normal
    允许单词内换行 只能在半角空格或连字符处换行。 浏览器默认

    word-wrap: 允许长单词换行到下一行 word-wrap: break-word;

    word-wrap break-word normal
    含义 在长单词或 URL 地址内部进行换行。 只在允许的断字点换行(浏览器保持默认处理)。

    Chrome, Safari以及其他WebKit/Blink浏览器还支持非官方标准的break-word值,其表现就和word-wrap: break-word一样。

    css3中换成了overflow-wrap,但支持的浏览器很少。所以还是乖乖用word-wrap吧。

    以上解释太晦涩。。不如看图:

    换行问题
    screenshot.png
    图2改成word-break: break-all;

    空格问题

    white-space(是否允许空格换行): 如何处理元素内的空白。// todo 暂时只了解nowrap好了

    white-space normal pre nowrap pre-wrap pre-line inherit
    不允许空格处换行
    white-space: nowrap;text-overflow:ellipsis; overflow: hidden;
    

    实现展示不完的文字使用省略号。

    word-break:keep-all; 结合text-overflow使用,有不一样的效果:

    screenshot.png

  • 相关阅读:
    deleted
    deleted
    deleted
    deleted
    deleted
    deleted
    deleted
    CF #505 B Weakened Common Divisor(数论)题解
    HDU 6425 Rikka with Badminton(组合问题签到)题解
    ZOJ 2747 Paint the Wall(离散化+暴力)题解
  • 原文地址:https://www.cnblogs.com/Mrs-cc/p/6126529.html
Copyright © 2011-2022 走看看