当标题在第二行中断时，正文不会溢出剪辑正确

Posted 2023-02-23

【中文标题】当标题在第二行中断时，正文不会溢出剪辑正确

【英文标题】：When headline breaks in second line, the body text does not overflow clip correct

【发布时间】：2021-05-25 00:11:38

【问题描述】：

如果我有一个长标题，根据字符串的长度分成两行，则正文文本在 Container 小部件内剪裁不正确

Expanded(
 child: Container(
   height: MediaQuery.of(context).size.height / 7.5,
   padding: EdgeInsets.only(right: 8),
   child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          'HERE SOME LONG HEADLINE, WITH 1 or 2 Lines'
       
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
        ),
        SizedBox(
        height: 3.0,
        ),
        Expanded(
         child: Text(
           'here some long body text over more lines, which is cut wrong when the headline is two lines',
           overflow: TextOverflow.ellipsis,
           softWrap: true,
           maxLines: 5,
           textAlign: TextAlign.left,
         ),
        ),
      ],
    ),
  ),
),

【参考方案1】：

我相信一些包装您的 Text 小部件的小部件会限制它们拥有的空间量，因此会进行剪裁。如果没有完整的小部件树，就无法确定是哪个。

您包含的Container 小部件具有指定的高度。如果您删除它，您的文本小部件是否仍然剪辑？

Expanded(
 child: Container(
   height: MediaQuery.of(context).size.height / 7.5, // ← try removing this
   padding: EdgeInsets.only(right: 8),

另外，也许这个包可能很有趣：AutoSizeText。

【讨论】：

是的，然后它会在小部件树中较高的容器边界上剪辑...所有容器应该具有相同的高度。有时标题是 2 行，有时只有 1 行。当标题只有 1 行时，文本会被正确剪切

添加了新截图