Question

我正在开发flask应用程序，并使用以下代码块将变量传递回呈现的html：

@app.route('/profile')
@login_required
def profile():
    return render_template('profile.html', key = db.get_user_token(session['email']))

我想使用此传递的密钥将密钥呈现给模板上的用户，但在加载时会中断页面。这是两个带有jinja模板的图像，没有相关代码，也没有相关代码。

使用：

<section class="bg-primary text-white mb-0">
        <div class="container-body">
        <h3 class="text-center text-uppercase text-white mb-0">API Key</h1>
            <hr width="50%">
            <div>
                <div class="mb-0 text-center text-white">
                <p id="key">{{key}}</p>
                </div>
                </div>
                <div class="text-center mt-4">
                    <a class="clickable btn btn-xl btn-outline-light" onclick="newKey();">Generate</a>
                </div>
            </div>
    </section>

输出图像： with

没有：

<section class="bg-primary text-white mb-0">
        <div class="container-body">
        <h3 class="text-center text-uppercase text-white mb-0">API Key</h1>
            <hr width="50%">
            <div>
                <div class="mb-0 text-center text-white">
                <p id="key">This is a bunch of text to show that it is not working when given a variable</p>
                </div>
                </div>
                <div class="text-center mt-4">
                    <a class="clickable btn btn-xl btn-outline-light" onclick="newKey();">Generate</a>
                </div>
            </div>
    </section>

输出图像： Without

Answer 1

可能是因为没有的示例不是一个单词，它可能会换行。但是，对于单个单词，您必须为该单词分配一些css，以便当该单词超出容器的宽度时换行。

将以下代码添加到您的css文件中，并将类.dont-break-out分配给p#key：

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

烧瓶Jinja变量破CSS

1 个答案: