Php 使用CSS缩短元素的内容

我有一个页面介绍了最新的博客文章，其中有一个动态生成的阅读更多链接

<div class="row">
    <div class="span3">
      <article>
        <div class="date">
          <span class="day">29</span>
          <span class="month">Oct</span>
        </div>
        <h4>
          <a href="#">How to make a blog</a>
        </h4>
        <p>
          // content here
       </p>
       <a class="read-more" href="#">
          read more
          <i class="icon-angle-right"></i>
       </a>
     </article>
   </div>
   <div class="span3">
      <article>
        <div class="date">
          <span class="day">29</span>
          <span class="month">Oct</span>
        </div>
        <h4>
          <a href="#">How to make a Robot</a>
        </h4>
        <p>
          // content here
       </p>
       <a class="read-more" href="#">
          read more
          <i class="icon-angle-right"></i>
       </a>
     </article>
   </div>           
</div>

//满足于此


//满足于此

如何缩短此内容并在后面加上点

jsiddle.对于一行：

p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

对于多行、webkit浏览器（包括safari、chrome、mobile safari等）：

对于一行：

p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

对于多行、webkit浏览器（包括safari、chrome、mobile safari等）：

---

你可以在这里使用一些js

$.each($('article p'),function(i,v){
    if($(v).html().length > 100)
        $(v).html( $(v).html().substr(0,200) + "...");        
});

---

查看

您可以在这里使用一些js

$.each($('article p'),function(i,v){
    if($(v).html().length > 100)
        $(v).html( $(v).html().substr(0,200) + "...");        
});

---

签出您可以使用div而不是p标记，p标记也可以，并使用以下CSS向其添加一个类

.myeclipse{
    white-space:nowrap; 
    width:12em;
    height:8em;
    overflow:hidden;
    text-overflow:ellipsis;
}

---

但是，由于br介于两者之间，它将分别应用于所有行，为了避免这种情况，请删除br

您可以使用div而不是p标记，p标记也可以，并使用以下CSS向其中添加一个类

.myeclipse{
    white-space:nowrap; 
    width:12em;
    height:8em;
    overflow:hidden;
    text-overflow:ellipsis;
}

---

但是，由于br介于两者之间，它将分别应用于所有行，为了避免这种情况，请删除br

您是指多行

省略号

？它在跨浏览器上不起作用，您是说多行

省略号
？它在跨浏览器上不工作，正在工作。但是博客主体也会有一些其他元素，比如
之后的
。那么我能做什么呢？我也不想展示这个内容。选中fiddle在这里您可以使用选择器隐藏该内容，在大多数情况下，html的格式将为您所知。更新的fiddle文章正文将使用CKEditor生成，因此用户不仅可以输入
ul
，还可以输入任何元素。所以我不能为所有元素编写选择器。现在我打算试试php
substr（$article->body，0200）。“…”如果有效，那太好了。。否则，您可以隐藏文章的所有子项，然后使用诸如date div、header标记和p标记之类的选择器仅显示其中的一小部分。也许使用类会有所帮助？这很有效。但是博客主体也会有一些其他元素，比如
之后的
。那么我能做什么呢？我也不想展示这个内容。选中fiddle在这里您可以使用选择器隐藏该内容，在大多数情况下，html的格式将为您所知。更新的fiddle文章正文将使用CKEditor生成，因此用户不仅可以输入
ul
，还可以输入任何元素。所以我不能为所有元素编写选择器。现在我打算试试php
substr（$article->body，0200）。“…”如果有效，那太好了。。否则，您可以先隐藏文章的所有子项，然后使用诸如date div、header标记和p标记之类的选择器仅显示其中的一小部分。也许使用类会有所帮助？问题通过
substr（$article->body，0200）解决。“…”。这个答案也解决了substr（$article->body，0200）的工作问题。这个答案也有效