文本溢出：高度有限的div内灵活高度div的省略号

我有一个包含浮动图像，标题和说明的固定大小的div。我的问题是，当添加大量文本时，div不会停留在其父项的边界内。我想要的是文本在达到div底部时被省略号截断。我无法控制名称和desc div的内容长度，所以我无法对它们施加高度。这看起来很琐碎，但我无法弄清楚我要去哪里错了。 JSFiddle 文本溢出：高度有限的div内灵活高度div的省略号

为了清楚起见，我的意思是，我想我的结果是这个样子：

{{name}} 
{{desc.}} Lorem ipsum dolor 
sit amet, consectetur adipisi 
cing elit, sed do eiusmod tem 
por incididunt ut labore et...

编辑：原来，这个问题是很多更复杂的比我的预期。这个问题与div边界没有任何关系，而是多行省略号结局并不是一件微不足道的事情。

HTML

<div id="data" class="clearfix"> 
<img id="icon" src="{{imgurl}}"> 
<div id="text"> 
    <div id="name">{{name}}</div> 
    <div id="desc">{{desc}}</div> 
</div> 
</div>

CSS

#data { 
background-color:red; 
width:300px; 
position: absolute; 
margin: 23px 44px; 
height: 100px; 
padding: 10px 10px; 
color: #fff; 
text-overflow: ellipsis; 
} 
#icon { 
background-color: grey; 
width: 80px; 
height: 80px; 
float: left; 
margin-right: 10px; 
} 
#text { 
float: right; 
width: 200px; 
height: 100%; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
#name { 
font-size: 18px; 
font-weight: bold; 
line-height: 1.5em; 
} 
#desc { 
font-size: 13px; 
line-height: 1.1em; 
text-overflow: ellipsis; 
}

Live Example on JSFiddle

来源

2014-01-06 Tantelope

你需要什么？ –

你需要使用省略号

时添加空格和溢出

我发现这篇文章记录这个... http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

和工作小提琴http://jsfiddle.net/z532E/10/

来源

2014-01-06 19:20:44 Travis

我的目标是在底部有多行和省略号。这将是我的第二选择。 – Tantelope

看看这个http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ 这里是一个有趣的工作示例，你想要做什么...我认为http：// codepen .io/romanrudenko/pen/bpeDF – Travis

这很聪明！这也帮助我弄清楚，我所要求的可能不像我想的那样微不足道。 – Tantelope

这是一个很好的解决方案，以你的多行问题上的省略号发现codepen： Pure CSS multiline text with ellipsis

$font-size: 26px; 
$line-height: 1.4; 
$lines-to-show: 3; 

h2 { 
    display: block; /* Fallback for non-webkit */ 
    display: -webkit-box; 
    max-width: 400px; 
    height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ 
    margin: 0 auto; 
    font-size: $font-size; 
    line-height: $line-height; 
    -webkit-line-clamp: $lines-to-show; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

来源

2017-11-15 10:21:24 Sjoerd

这是一个很好的解决方案。不幸的是，它不适用于IE11 – Tantelope

文本溢出：高度有限的div内灵活高度div的省略号

回答

相关问题