CSS。在引导按钮内中断文本

Question

因此，基本上，我正在使用bootsrap，并且具有可折叠按钮的手风琴。按钮的两列文字和右侧的一个图标。

我试图将第二列中的文本分成多行，以使其适合按钮。

有什么想法吗？

我在此Codepen中有一个示例：

https://codepen.io/averied/pen/gBoxbw

我需要在div id =“ bloc2”内破坏文本

from Crypto.PublicKey import RSA
import base64
import sys
import ast
def decode_rsa(encryptedString, key_path):
    key = RSA.importKey(open(key_path).read())
    deocdedString = base64.b64decode(encryptedString)
    decrpytedString = key.decrypt(deocdedString)
    return decrpytedString

print decode_rsa(sys.argv[1], sys.argv[2])

Answer 1

您可以使用

#bloc2 { white-space: normal; }

Answer 2

首先，您需要修改#block_container使其包含flex-wrap: wrap;。尝试如下修改CSS：

#block_container
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    cursor: pointer;
}

和

#bloc2 {
display: flex;
justify-content: center;
flex-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

我不确定为什么您希望按钮的高度而不是ellipsis文本。

https://codepen.io/anon/pen/rqpGwe

Answer 3

向btn添加一个特殊的类，例如...

.text-wrap {
  white-space: normal;
}

然后从块2中删除word-break: break-all; ...

https://codepen.io/anon/pen/ePyGRJ