Question

在小提琴中，我试图减少每个问题选项中每个句子之间的空格量（选项是蓝色文本）：

我使用pds-answer-group属性缩小了line-height类的高度：

.pds-answer-group {
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
height:auto;
overflow:hidden;
line-height:50%;
}

但是线之间的空间量没有减少。如何更新CSS以减少问题选项的每行文本之间的空间量？

小提琴背后的CSS：

.pds-question-top {
font-size:10pt !important;
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-pd-link, .pds-comments {
display:none !important;
}

.pds-box {
width:220px !important;
}

.pds-input-label {
width:85% !important;
}

.PDS_Poll {
margin-bottom:15px;
}

.pds-answer-span {
color:#00f;
}

.pds-vote {
background-color:#424242;
}

.pds-answer-text {
color:#00f;
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-answer-feedback {
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-votebutton-outer {
text-align:center;
}

.pds-answer-group {
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
height:auto;
overflow:hidden;
}

.pds-input-label,.pds-answer-input {
float:left;
}

.pds-view-results,.pds-links {
color:#FFF !important;
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-comments,.pds-return-poll {
color:#FFF !important;
}

.pds-links {
    display: inline !important;
}
.pds-pd-link {
display: none !important;
}
.pds-box {
    width: 220px !important;
}
.pds-input-label{
    width: auto! important;
}
.PDS_Poll{
    margin-bottom:15px;
}

.pds-question-top {padding:0 !important}

小提琴背后的HTML：

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script>
<noscript><a href="http://polldaddy.com/poll/6352993/">This is very long test question to test how polldaddy handles questions that exceed that normal length............ yes a very long question indeed..............</a></noscript>

$(document).ready(function() {

    $('.pds-question-inner').prepend('<span style="color:red;font-weight:bold;font-size: 15px;float:left">Header</span>');
});

Answer 1

看起来你的CSS被.pds-input-label类覆盖了。它可能是从您正在使用的JS文件加载的。只需将line-height: 50% !important;添加到.pds-input-label课程即可。请参阅此处的示例http://jsfiddle.net/2Wrhd/

Answer 2

您可以在CSS中设置line-height，具体取决于您希望减少其间空间的文本。

示例：

.pds-answer-group { padding-top:1px !important; padding-bottom:1px !important; margin-top:1px !important; margin-bottom:1px !important; height:auto; overflow:hidden; line-height:9pt /* worked when i changed this from 50% */ }

Answer 3

事实上，有问题的元素是：

.pds-answer-span {
  line-height: 150% !important;
}

您可以使用Ctrl + Shift + i在Firefox中轻松检查它（并将其重新定义为100％降低线条）。

Answer 4

我尝试过并且工作过。把跨度放在

<p></p>

并设置line-height属性：

<p style="line-height: 2pt';"><span class="pds-answer-span">blablabla</span></p>

如何减少文本行之间的空间量

4 个答案: