html中把多余文字转化为省略号(单行文本)


<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>溢出的内容显示省略号title>
        <style type="text/css">
            .b1{
                width: 200px;
                overflow:hidden;  /*内容会被修剪,并且其余内容是不可见的。*/
                text-overflow: ellipsis;  	/*显示省略符号来代表被修剪的文本*/
                white-space: nowrap;	/*文本不会换行,文本会在在同一行上继续,直到遇到 
标签为止。*/
}
style> head> <body> <div class="b1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur doloremque, officiis? Eum facilis quod repudiandae sunt voluptate? Cum dignissimos, saepe. Architecto autem dicta quae quam quas rem sit voluptate. Dolores! div> body> html>

结果展示:

html中把多余文字转化为省略号(单行文本)_第1张图片
比如京东的这个就是:

html中把多余文字转化为省略号(单行文本)_第2张图片

你可能感兴趣的:(HTML,html,css)