與d3一起使用時文本溢出屬性不起作用

我正嘗試使用d3生成JSON對象中的數據列表。我正在嘗試將文本溢出屬性應用於省略號。出於某種原因，它不起作用。請讓我知道我要去哪裏錯了。這是代碼。請參閱CSS的屬性。 ENTITY_TYPE與d3一起使用時文本溢出屬性不起作用

<!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>

解決方案：我做的錯誤是我申請文本溢出屬性的DIV，而不是它是造成問題的實際p元素。

來源

2013-03-13 Adithya

您必須爲包含文本的元素設置溢出樣式屬性。

你的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; 
}

來源

2013-03-13 08:31:28 widged

非常感謝的答案，將工作。工作非常順利！ – Adithya 2013-03-13 10:34:47

回答

相關問題