如何让固定宽度父容器内的p元素随文本换行自适应宽度

如何让下方示例中的p元素根据内部文本调整宽度，同时不改变正常换行行为（尽可能仅用CSS实现）？当前p元素忽略换行，宽度过宽，红色标记部分为需移除的空白区域，它应仅延伸至最长行末尾，再加上边框前的10px padding。

示例代码：

.message {
  width: 170px;
}

.message p {
  padding: 10px;
  border: solid;
}

<div class="message">
  <a>
    <p>
      Trylalalala- and Lololololol
    </p>
  </a>
</div>

1. 代码量最少的CSS方案 #

.message {
  width: 170px;
}

.message p {
  padding: 10px;
  border: solid;
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
}

<div class="message">
  <a>
    <p>
      Trylalalala- and Lololololol
    </p>
  </a>
</div>

缺点：会强制额外换行，使文本变为3行。

2. 基于jQuery的方案 #

$.fn.fixWidth = function () {
    $(this).each(function () {
        var el = $(this);
        // 获取文本长度：添加span到容器后获取其宽度
        var getLength = function (txt) {
            var span = new $("<span />");
            if (txt == ' ')
                span.html('&nbsp;');
            else
                span.text(txt);
            el.append(span);
            var len = span.width();
            span.remove();
            return len;
        };
        var words = el.text().split(' ');
        var lengthOfSpace = getLength(' ');
        var lengthOfLine = 0;
        var maxElementWidth = el.width();
        var maxLineLengthSoFar = 0;
        for (var i = 0; i < words.length; i++) {
            // 跳过空格分割出的空字符串
            if (words[i] == '')
                continue;
            // 获取当前单词的宽度
            var curWord = getLength(words[i]);
            // 判断添加当前单词是否会换行
            if ((lengthOfLine + (i == 0 ? 0 : lengthOfSpace) + curWord) > maxElementWidth) {
                // 记录当前最长行宽度
                if (lengthOfLine > maxLineLengthSoFar) {
                    maxLineLengthSoFar = lengthOfLine;
                    lengthOfLine = 0;
                }
            }
            else // 不换行则继续累加当前行宽度
                lengthOfLine += (i == 0 ? 0 : lengthOfSpace) + curWord;
        }
        // 若存在换行，设置元素宽度为最长行宽度
        if (maxLineLengthSoFar != 0)
            el.css({ width: maxLineLengthSoFar + "px" });
    });
};

$(function () {
    $(".message p").fixWidth();
});

.message {
  width: 170px;
}
.message p {
  padding: 10px;
  border: solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message">
  <a>
    <p>
      Trylalalala- and Lololololol
    </p>
  </a>
</div>

优点：可避免额外换行，但需引入jQuery。

内容的提问来源于Stack Exchange，提问作者Cold_Class