Question

我正在尝试使用d3从JSON对象生成数据列表。我试图将文本溢出属性应用于省略号。出于某种原因，它无法正常工作。请告诉我出错的地方。这是代码。请参阅。 entity_type

的CSS属性

<!DOCTYPE html>
<html lang="en">
<head>
    <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Rich List : Result Level1 </title>
<script type="text/javascript" src="d3/d3.v3.js">


</script>
<style type="text/css">

@font-face {
    font-family:segoeui;
    src: url('img/segoeui.ttf');
}


.envelop_container{
    width:500px;
    height:300px;
    border-color:#BABABA;
    border-style:solid;
    border-width:1px;
    margin:auto;
    overflow-x:auto;
    overflow-y: auto;
    resize: both;
}

.input_bar{

    width:100%;
    height:15%;
    border-bottom-color:#BABABA;
    border-bottom-style:solid;
    border-bottom-width:1px;
    resize: both;
}

.data{
    position:relative;
    width:100%;
    height:80px;
    border-bottom-color:#BABABA;
    border-bottom-style:solid;
    border-bottom-width:1px;
}

.title{


    font-family:segoeui;

    position:absolute;
    top:0px;
    left:110px;
    width:300px;
    overflow:hidden; 
    text-overflow: ellipsis;
    white-space:nowrap; 



}

.entity_type{

    font-family:segoeui;
    color:#F3F3D5;
    background:#4E4C4C;
    font-size:10.5px;
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:20px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

}

.filing_date{

    font-family:segoeui;
    position:absolute;
    top: 60px;


}

.eta{

    font-family:segoeui;
    font-size:30px; 
    color: #63B8FF;
    position:absolute;
    top:0px;
    right:0px;
}

p{
    margin:0px;
}


</style>
</head>
<body>
    <script>

        var dataset = [

    {
        'title':'Microsoft Corporation Enters into partnership with Parc',
        'entity_type':'Strategic Alliance',
        'filing_date':'23-03-12',
        'eta':'23h 25m' 
    },
    {
        'title':'Microsoft sets up lab for Open Source Tests',
        'entity_type':'Business Expansion',
        'filing_date':'12-12-13',
        'eta':'23h 25m' 
    },
    {

        'title':'Microsoft and unisys build on Interpay software',
        'entity_type':'Executive Board Change',
        'filing_date':'11-03-11',
        'eta':'23h 25m' 
    }   ,

    {


        'title':'Microsoft Corporation Enters into partnership with Parc',
        'entity_type':'Strategic Alliance',
        'filing_date':'12-12-12',
        'eta':'23h 25m' 
    },
    {


        'title':'Microsoft Corporation Enters into partnership with Parc',
        'entity_type':'Strategic Alliance',
        'filing_date':'12-12-12',
        'eta':'23h 25m' 
    }
    ];


    //  envelop_container
        var outer_divs = d3.selectAll("body")
        .append("div")
        .attr('class','envelop_container');

        outer_divs.append('div')
        .attr('class','input_bar');

    //envelop_container 


    // Data 
        var data_div = outer_divs.selectAll('div')
        .data(dataset)
        .enter()
        .append('div')
        .attr('class','data')

    //DATA  

    // TITLE
        var databox = data_div.append('div')
        .attr('class','title')

    //TITLE 

    //ENTITY_TYPE   
        var entity_type = data_div.append('div')
        .attr('class','entity_type')
        .attr('id','entity_type');
    //ENTITY_TYPE


    //FILING_DATE

        var filing_date = data_div.append('div')
        .attr('class','filing_date')

    //FILING_DATE
    //ETA   

        var  eta= data_div.append('div')
        .attr('class','eta')

    //ETA

    //TITLE TEXT ------------------------------

        databox.append('p')
        .text(function(d){return d.title;})

    //TITLE TEXT ------------------------------
    // ENTITY TEXT-----------------------------
        entity_type.append('p')
        .text(function(d){return d.entity_type;})
        .attr('class','entity_text')


        filing_date.append('p')
        .text(function(d){return "FDate:"+d.filing_date;});

        eta.append('p')
        .text(function(d){return d.eta;})

    // ENTITY TEXT----------------------------- 

    // STYLES

    databox
    //TITLE     
    </script>



<body>


</body>


</html>

解决方案：我犯的错误是我将text-overflow属性应用于div而不是导致问题的实际p元素。

Answer 1

您必须为包含文本的元素设置overflow style属性。

你的HTML是

<div class="entity_type" id="entity_type">
  <p class="entity_text">Business Expansion</p>
</div>

将此添加到您的css，它将按预期工作

p.entity_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow:    ellipsis;
}

使用d3时，text-overflow属性不起作用

1 个答案: