Add ellipses after text overflows and is hidden

The effect of hiding and adding ellipses when we want the text to overflow

The width must be set in the current container or the parent container, otherwise the code will be invalid.

<span style="color: #800000">.box</span>{<span style="color: #ff0000">
         width</span>:<span style="color: #0000ff">50%</span>;<span style="color: #ff0000">
         text-overflow </span>:<span style="color: #0000ff">ellipsis</span>;<span style="color: #008000">/*</span><span style="color: #008000"> 文字隐藏后添加省略号 </span><span style="color: #008000">*/</span><span style="color: #ff0000">
         white-space </span>:<span style="color: #0000ff"> nowrap</span>;<span style="color: #008000">/*</span><span style="color: #008000"> 强制不换行 </span><span style="color: #008000">*/</span><span style="color: #ff0000">
         overflow </span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #008000">/*</span><span style="color: #008000">自动隐藏文字</span><span style="color: #008000">*/</span><span style="color: #ff0000">
         width</span>:<span style="color: #0000ff"> 20em</span>;<span style="color: #008000">/*</span><span style="color: #008000">不允许出现半汉字截断</span><span style="color: #008000">*/</span>
    } 

The above is the detailed content of Add ellipses after text overflows and is hidden. For more information, please follow other related articles on the PHP Chinese website!