NNode
NNode

CSS3弹性布局文字超出省略号代替不起作用解决方法


<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弹性布局。现在我们就来个简单的但足以说明问题的例子。来吧，骚年。


<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属性也可以，并且值可以是任意，不信，你试试！

你可能感兴趣的:(Web前端)