您的位置:主页 > 新闻动态 > 环亚娱乐平台新闻 >

环亚国际平台设计中CSS3弹性布局文字超出省略号代替不起作用解决方法

日期:2017-09-09 14:51     来源:未知    作者admin    阅读:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
    .text-deal{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
</head>
<body>
<div class="text-deal">
    这是一个有效果的文字超出用省略号代替的例子,你看可以吗?
</div>
</body>
</html>
 
上面这个例子是文字超出部分用省略号代替的CSS解决办法,切换到手机模式后你就可以看到效果了,这样写是没有问题的,但是还有一些情况我们现在用得也比较多,最新的(16年)CSS3弹性布局。现在我们就来个简单的但足以说明问题的例子。来吧,骚年。
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
    .parent{
        display: flex;
    }
    .children{
        flex: 1;
        /*min-width: 0;*/
    }
    .text-deal{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
</head>
<body>
<div class="parent">
    <div class="children">
        <div class="text-deal">
            这是一个有效果的文字超出用省略号代替的例子,你看可以吗?
        </div>
    </div>
</div>
</body>
</html>
 
切换到手机模式运行上面这个例子,会看到超出去的文字竟然没有被变成省略号。这是什么问题呢,可能是flex计算的时候,先计算的子元素,导致忽略了width和text-overflow的计算,具体原因还不清楚,但我知道怎么才可以让text-overflow: ellipsis;起作用。你仔细看下上面的样式代码,里面有一行代码被注释掉了,你把他放出来,就可以解决了text-overflow:ellipsis文字超出省略号代替不起作用的问题了。不只是min-width属性可以,width属性也可以,并且值可以是任意,不信,你试试!
<友情连结> 天祥科技/ 合肥优派信息技术有限公司/ 申泽seo管理系统/ 福建拾方易网络科技有限公司/ 博客西藏/