javascript - 我如何将文本发送到另一行，我有一张图片然后是文本。如果文本太长，我希望文本位于第一行文本下方

Question

编辑:我发现我提供了错误的 fiddle ，对不起大家。这是固定的那个。抱歉，如果标题太长。这里我再叙述一下。我有一张 table ，在那个 table 里面每个单元格都有图片和文本。如果文字太长，文字会放在图片下方。文本应位于该文本的第一行下方。如果这是不可能的，作为替代我想做

"white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;" if the text goes over 60. 

这是我的代码，没有足够的文本来搞砸； https://jsfiddle.net/crs8yenu/164/

<h4 id="line">
        <a href="{{ post.url }}" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="{{post.image}}" height="70" width="85"/><span id="title-font">
          aaaaaaaa</span></a>
        <span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
        <span class="discuss" style="color:red;"><a href="{% url 'post' post.slug %}" class="btn btn-info btn-sm">enter</a></span>

      </h4>

这里有足够多的文字来搞砸 https://jsfiddle.net/crs8yenu/166/

<h4 id="line">
        <a href="{{ post.url }}" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="{{post.image}}" height="70" width="85"/><span id="title-font">
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></a>
        <span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
        <span class="discuss" style="color:red;"><a href="{% url 'post' post.slug %}" class="btn btn-info btn-sm">enter</a></span>

      </h4>

Answer 1

我想这就是您要找的。我添加了一行 CSS 来定位该链接，告诉它显示为一个内联 block (这样我就可以设置它的宽度)，然后给它一个 max-width 属性来限制宽度。

h4#line a:first-of-type{
    max-width:250px;
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

参见 fiddle :https://jsfiddle.net/crs8yenu/167/

这也可能是您要查找的内容 - 我没有将第一个链接显示为 inline-block，而是将链接内的跨度(包含您的标题文本)设置为显示为inline-block 所以它会很好地放在你的图片旁边。接下来我将它设置为 vertical-align: top 以便它与图像的顶部而不是底部对齐(将您的环绕文本放置在某个地方)，然后我给它一个 max-width(以防止它向右无限扩展)和 max-height 等于您在图像中设置的显式高度，以确保它不会结束比图片高。

#title-font {
  display: inline-block;
  vertical-align: top;
  max-width: 100px;
  max-height: 70px;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

参见 fiddle :https://jsfiddle.net/crs8yenu/169/