防止引用包装

时间:2015-12-15 01:22:40

标签: css

我从服务器获取一些文本,并使用标记在前端添加引号。问题是有时只有最终报价被包装到一个新行上。我该如何防止这种情况发生。

我不介意最后一个单词是否与引号一起包装。

我尝试过在文本中使用white-space:nowrap,但我事先并不知道文本的长度所以我不希望它超出包含元素的宽度所以white-space:nowrap不起作用。

编辑:

<div class="quote">

        <span class="quote-opening">&ldquo;</span>
        <p class="quote-body">Some famous quote here thats being returned from the server
            <span class="quote-closing">&rdquo;</span>
        </p>
                                
</div>


.quote{

	.quote-opening{
		width: 10%;
		display: inline-block;
  		vertical-align: top;
	}

	.quote-body{
		width: 90%;
	}

}

我想缩小文本和右边的结束引号,边距为10px。这就是为什么我试图显示:内联块为开场报价。

1 个答案:

答案 0 :(得分:0)

使用应用于您的引用的overflow:hidden应该有效,但这取决于您的实施。提供代码会有所帮助。

This existing answer解释了这种技术的应用。