jquery - 在 Zurb Foundation 5.5.3 中，如何减少 和 'shorten"JS 插件之间的边距/填充

Question

我正在使用带有 CSS 的 Zurb Foundation 5.5.3(并且不想使用 SASS)。我正在运行 Windows 7。我正在使用 Jquery Shorten 来显示语言列表 https://github.com/viralpatel/jquery.shorten

我试图用“阿塞拜疆语转录和翻译”来减少最后一个 li 和下面的“更多”之间的空间。我试图以减少边距和填充顶部或底部为目标，但没有成功......

见截图:

我的html代码和css如下

.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom ul {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}


ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

ul.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul li {
  padding-top: -1.75rem;
  margin-top: -1.75rem;

}

.reducebottom ul li {
  padding-bottom: -5.75rem;
  margin-bottom: -5.75rem;
}

li.reducemargin{
margin: 0px;
}

ul.reducemargin { 
  margin:-20px;
}

.reducemargin ul { 
  margin:-20px;
}

.reducemargin ul li { 
  margin:-20px;
}

ul.noindent {
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

.imagelist li{
            Padding:0;
            margin:0;
}

      <div class="row"> 
         <div class="small-12 medium-12 columns">
          <h4>more languages</h4> 

          <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>

            <div class="medium-4 columns">
            <div class="reducetop reducemargin imagelist">
            <ul class="noindent imagelist">
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li class="reducemargin noindent imagelist">Azerbaijani transcription and translation</li>           
            </ul>
            </div>
            <div class="reducetop reducemargin">
          <ul class="comment-small reducemargin noindent imagelist">
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 
           </div>

         </div> 

          <div class="medium-4 columns comment">
          <ul>
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li>Azerbaijani transcription and translation</li>
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 

         </div> 
          </div>

          </div>

:

这是我的 html 中的缩短插件脚本。

<script language="javascript">

$(文档).ready(函数() {

$(".comment").shorten();

$(".comment-small").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-list").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-test").shorten({showChars: 30});  

});

如有任何帮助，我们将不胜感激!

Answer 1

您在上面的问题中有一些多余的代码(我猜附加在您网站的其他地方)

例如

ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

reducetop 类应用于 div(在您显示的代码中)和一些 jQuery 引用 HTML 中不存在的元素(例如 $(".comment-test").shorten({showChars: 30}); 等

因此，为了帮助我回答您的问题，我在特定列中删除了与您的问题无关的 CSS、JS 和 HTML。

HTML

<div class="row">
  <div class="small-12 medium-12 columns">
    <h4>more languages</h4>
    <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>
    <div class="medium-6 columns end">
      <div class="">
        <ul class="noindent imagelist">
          <li>Albanian transcription and translation</li>
          <li>Amharic transcription and translation</li>
          <li>Arakanese transcription and translation</li>
          <li>Armenian transcription and translation</li>
          <li class="">Azerbaijani transcription and translation</li>
        </ul>
        <ul class="comment-small noindent imagelist">
          <li>Aymara transcription and translation</li>
          <li>Belarusan transcription and translation</li>
          <li>Bengali transcription and translation</li>
          <li>Bhilali transcription and translation</li>
          <li>Burmese transcription and translation</li>
          <li>Cambodian transcription and translation</li>
          <li>Caqchiquel transcription and translation</li>
          <li>Chechen transcription and translation</li>
          <li>Creole transcription and translation</li>
          <li>Dari transcription and translation</li>
          <li>Dinka transcription and translation</li>
          <li>Faroese transcription and translation</li>
          <li>Farsi transcription and translation</li>
          <li>Flemish transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Fulani transcription and translation</li>
          <li>Georgian transcription and translation</li>
          <li>Uzbek transcription and translation</li>
          <li>Greenlandic transcription and translation</li>
          <li>Guarani transcription and translation</li>
          <li>Gujerati transcription and translation</li>
          <li>Hassaniya transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Icelandic transcription and translation</li>
          <li>Inuktitut transcription and translation</li>
        </ul>
      </div>
    </div>
  </div>
</div>

(只有一列，删除了一些类，将一个类应用于相关的 ul)

JavaScript/jQuery

$(document).ready(function() {
  $(".comment-small").shorten({
    showChars: 10,
    moreText: 'more',
    lessText: 'less',
    ellipsesText: '...',
  });
}).foundation();

(相同，但在末尾调用 Foundation 初始化并只切到一个要“缩短”的列表)

CSS

ul.noindent {
  margin-left: 5px;
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 0px;
}

.imagelist {
  padding: 0;
  margin: 0;
}
.shortcontent,
.morelink {
  float: left;
}

所以基本上:如果您删除所有与应用于列表的父元素和子元素的填充或边距相关的 css，然后为您的 ul 元素选择一个类来控制间距(我在示例中重复使用了您的 imagelist 类)您可以将边距和填充设置为 0(或任何您需要的值)。

然后为了进一步减少(感知的)差距(它已经是 0)，您可以使用 jQuery.Shortening 添加到创建元素的类将省略号和“更多”span 堆叠在同一行:

.shortcontent,
.morelink {
  float: left;
}

如果需要，您还可以填充 .shortcontent(省略号)以在元素之间创建水平间隙。

这是一个工作示例:https://jsfiddle.net/tymothytym/0dvf2gzk/