首页 > html > faq > 3.html文本超宽不换行显示省略号

3.html文本超宽不换行显示省略号

手机屏幕比电脑屏幕小很多,一个网页在电脑上显示正常手机上可能出现字体放不下自动换行的情况,这样影响页面的美观.可以通过css样式设置超屏不换行并且显示省略号.

1 css样式设置文本超宽不换行显示省略号

通过设置css样式中的white-space:nowrap;overflow: hidden;text-overflow: ellipsis;可以实现html文本超宽不换行显示省略号.

css示例代码:

/* 超过一行显示省略号*/
.single_line {
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

2 html文本超宽显示省略号不换行示例代码

大屎蛋教程网就是采用这种方式设置的css样式, 来做小屏幕手机显示适配.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 超过一行显示省略号*/
        .single_line {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="single_line">
    <a href="http://dashidan.com">大屎蛋教程网http://dashidan.com是最棒的编程教程网站.我是来凑字数的,缩小屏幕宽度看效果.</a>
</div>
</body>
</html>

将这个代码复制,存储为index.html,用浏览器打开. 缩小浏览器的宽度,可以看到超过平库宽度时字不换行而是显示省略号的效果.

转载请保留原文链接.