如何在div容器中显示大型令牌

Question

我有一个生成的令牌，我想在div容器中显示它

#container {
padding: 10px;
background: #f0f0f0;
}

<div id="container">eyJhbGciOiJSUzUxMiJ9.eyJhcGkiOnsiZGF0YVByb3ZpZGVyIjp7InR5cGUiOiJodHRwIiwib3B0aW9ucyI6eyJ1cmwiOiJodHRwczovL3d3dy5leGFtcGxlLmNvbSJ9fSwiZGF0YVNvdXJjZXMiOnsibGVhZGluZyI6eyJpZCI6InNvdXJjZUVudGl0eSIsImVudGl0eVR5cGVJZCI6Im1haW5FbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYiJdfSwiZm9sbG93aW5nIjpbeyJpZCI6ImZvbGxvd2luZ0VudGl0eSIsImVudGl0eVR5cGVJZCI6InJlbGF0ZWRFbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYyIsImQiXSwiZGVwZW5kc09uIjp7ImRhdGFTb3VyY2VJZCI6InNvdXJjZUVudGl0eSIsInJlbGF0aW9uIjp7InR5cGVJZCI6ImlzUmVsYXRlZFRvIiwic291cmNlSXMiOiJvdGhlciJ9fX1dfX0sImZpZWxkcyI6W3siaWQiOiJhIiwidGl0bGUiOnsiZW4iOiJBIn0sImlzUmVxdWlyZWQiOnRydWUsImRhdGFUeXBlIjp7InR5cGUiOiJib29sZWFuIn0sImRlZmF1bHRWYWx1ZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB1bmRlZmluZWQiLCJydWxlcyI6W3sicnVsZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB0cnVlIiwiZXJyb3JNZXNzYWdlIjp7ImVuIjoiZmFsc2UifX1dfV0sImxvb2t1cHMiOnsiaW5pdGlhbExvb2t1cHMiOlt7ImlkIjoibG9va3VwLTEiLCJzb3VyY2UiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAvbG9va3VwLTEifV19LCJ1aSI6eyJmb3JtcyI6W3siaWQiOiJmb3JtLTEiLCJmaWVsZHMiOlt7ImlkIjoiYSIsImlzUmVhZG9ubHkiOmZhbHNlLCJpc0hpZGRlbiI6ZmFsc2V9XX0seyJpZCI6ImZvcm0tMiIsImZpZWxkcyI6W3siaWQiOiJhIiwiaXNSZWFkb25seSI6dHJ1ZSwiaXNIaWRkZW4iOnRydWUsImRpc3BsYXlQbGFpblZhbHVlRnVuY3Rpb24iOnsiZW4iOiJ2YWx1ZSA9PiBKU09OLnN0cmluZ2lmeSh2YWx1ZSkifX1dfV0sImNvbHVtbnMiOlt7InR5cGUiOiJlbnRpdHkiLCJkYXRhU291cmNlSWQiOiJzb3VyY2VFbnRpdHkiLCJjcmVhdGVGb3JtSWQiOiJmb3JtLTEiLCJjb2xsYXBzZWRGb3JtSWQiOiJmb3JtLTEiLCJleHBhbmRlZEZvcm1JZCI6ImZvcm0tMSIsInRpdGxlIjp7ImVuIjoiU291cmNlcyJ9LCJzdHJpbmdpZnlFbnRpdHlGdW5jdGlvbkFzU3RyaW5nIjp7ImVuIjoiZW50aXR5ID0-IEpTT04uc3RyaW5naWZ5KGVudGl0eSkifSwiaXNMZXNzVGhhbiI6eyJmdW5jdGlvbkFzU3RyaW5nIjoiKCkgPT4gdHJ1ZSIsImluZGV4IjowfX0seyJ0eXBlIjoiZW50aXR5IiwiZGF0YVNvdXJjZUlkIjoiZm9sbG93aW5nRW50aXR5IiwiY3JlYXRlRm9ybUlkIjoiZm9ybS0yIiwiY29sbGFwc2VkRm9ybUlkIjoiZm9ybS0yIiwiZXhwYW5kZWRGb3JtSWQiOiJmb3JtLTIiLCJ0aXRsZSI6eyJlbiI6IkZvbGxvd2VycyJ9LCJzdHJpbmdpZnlFbnRpdHlGdW5jdGlvbkFzU3RyaW5nIjp7ImVuIjoiZW50aXR5ID0-IEpTT04uc3RyaW5naWZ5KGVudGl0eSkifX1dfX0.2pkkq_rD95XsnZLzDh3vrhUHwUdEyWK1vrON0tIAISgDqQ0ZajFO34aQCwsboS-121G8kNckaZ2L10oMyREX_4ORdklMkbSPv49n5MUmc_o_eN3jYZKZ9ikKefKKHQzzkZF6UVurNImnHcskniLJisfIjsmJyVypNFG05QlXlrS19AdBSAom5w4pAsDhYmoBubyS0_SYmrbRnWLfvXuz_kgamB_rmCKqVHIDZEDBI8LCBiGWNt6TILvrVht0nS3AWrE55mZRVA9C0sP-DvWzUffXP_b51pqUqve0z50JWZwaP2Mp9WfqBu-r2_4xOsNJkLo437btTrl2hLlr2VMJCQ</div>

正如您所看到的，它超过了容器宽度，并且不会自动添加换行符。如何显示此类代币？

Answer 1

word-break对此有帮助。另请参阅这篇css技巧文章。

#container {
padding: 10px;
background: #f0f0f0;
word-break: break-all;
}

<div id="container">eyJhbGciOiJSUzUxMiJ9.eyJhcGkiOnsiZGF0YVByb3ZpZGVyIjp7InR5cGUiOiJodHRwIiwib3B0aW9ucyI6eyJ1cmwiOiJodHRwczovL3d3dy5leGFtcGxlLmNvbSJ9fSwiZGF0YVNvdXJjZXMiOnsibGVhZGluZyI6eyJpZCI6InNvdXJjZUVudGl0eSIsImVudGl0eVR5cGVJZCI6Im1haW5FbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYiJdfSwiZm9sbG93aW5nIjpbeyJpZCI6ImZvbGxvd2luZ0VudGl0eSIsImVudGl0eVR5cGVJZCI6InJlbGF0ZWRFbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYyIsImQiXSwiZGVwZW5kc09uIjp7ImRhdGFTb3VyY2VJZCI6InNvdXJjZUVudGl0eSIsInJlbGF0aW9uIjp7InR5cGVJZCI6ImlzUmVsYXRlZFRvIiwic291cmNlSXMiOiJvdGhlciJ9fX1dfX0sImZpZWxkcyI6W3siaWQiOiJhIiwidGl0bGUiOnsiZW4iOiJBIn0sImlzUmVxdWlyZWQiOnRydWUsImRhdGFUeXBlIjp7InR5cGUiOiJib29sZWFuIn0sImRlZmF1bHRWYWx1ZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB1bmRlZmluZWQiLCJydWxlcyI6W3sicnVsZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB0cnVlIiwiZXJyb3JNZXNzYWdlIjp7ImVuIjoiZmFsc2UifX1dfV0sImxvb2t1cHMiOnsiaW5pdGlhbExvb2t1cHMiOlt7ImlkIjoibG9va3VwLTEiLCJzb3VyY2UiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAvbG9va3VwLTEifV19LCJ1aSI6eyJmb3JtcyI6W3siaWQiOiJmb3JtLTEiLCJmaWVsZHMiOlt7ImlkIjoiYSIsImlzUmVhZG9ubHkiOmZhbHNlLCJpc0hpZGRlbiI6ZmFsc2V9XX0seyJpZCI6ImZvcm0tMiIsImZpZWxkcyI6W3siaWQiOiJhIiwiaXNSZWFkb25seSI6dHJ1ZSwiaXNIaWRkZW4iOnRydWUsImRpc3BsYXlQbGFpblZhbHVlRnVuY3Rpb24iOnsiZW4iOiJ2YWx1ZSA9PiBKU09OLnN0cmluZ2lmeSh2YWx1ZSkifX1dfV0sImNvbHVtbnMiOlt7InR5cGUiOiJlbnRpdHkiLCJkYXRhU291cmNlSWQiOiJzb3VyY2VFbnRpdHkiLCJjcmVhdGVGb3JtSWQiOiJmb3JtLTEiLCJjb2xsYXBzZWRGb3JtSWQiOiJmb3JtLTEiLCJleHBhbmRlZEZvcm1JZCI6ImZvcm0tMSIsInRpdGxlIjp7ImVuIjoiU291cmNlcyJ9LCJzdHJpbmdpZnlFbnRpdHlGdW5jdGlvbkFzU3RyaW5nIjp7ImVuIjoiZW50aXR5ID0-IEpTT04uc3RyaW5naWZ5KGVudGl0eSkifSwiaXNMZXNzVGhhbiI6eyJmdW5jdGlvbkFzU3RyaW5nIjoiKCkgPT4gdHJ1ZSIsImluZGV4IjowfX0seyJ0eXBlIjoiZW50aXR5IiwiZGF0YVNvdXJjZUlkIjoiZm9sbG93aW5nRW50aXR5IiwiY3JlYXRlRm9ybUlkIjoiZm9ybS0yIiwiY29sbGFwc2VkRm9ybUlkIjoiZm9ybS0yIiwiZXhwYW5kZWRGb3JtSWQiOiJmb3JtLTIiLCJ0aXRsZSI6eyJlbiI6IkZvbGxvd2VycyJ9LCJzdHJpbmdpZnlFbnRpdHlGdW5jdGlvbkFzU3RyaW5nIjp7ImVuIjoiZW50aXR5ID0-IEpTT04uc3RyaW5naWZ5KGVudGl0eSkifX1dfX0.2pkkq_rD95XsnZLzDh3vrhUHwUdEyWK1vrON0tIAISgDqQ0ZajFO34aQCwsboS-121G8kNckaZ2L10oMyREX_4ORdklMkbSPv49n5MUmc_o_eN3jYZKZ9ikKefKKHQzzkZF6UVurNImnHcskniLJisfIjsmJyVypNFG05QlXlrS19AdBSAom5w4pAsDhYmoBubyS0_SYmrbRnWLfvXuz_kgamB_rmCKqVHIDZEDBI8LCBiGWNt6TILvrVht0nS3AWrE55mZRVA9C0sP-DvWzUffXP_b51pqUqve0z50JWZwaP2Mp9WfqBu-r2_4xOsNJkLo437btTrl2hLlr2VMJCQ</div>

Answer 2

#container {
padding: 10px;
background: #f0f0f0;  
word-wrap: break-word;
}

<div id="container">eyJhbGciOiJSUzUxMiJ9.eyJhcGkiOnsiZGF0YVByb3ZpZGVyIjp7InR5cGUiOiJodHRwIiwib3B0aW9ucyI6eyJ1cmwiOiJodHRwczovL3d3dy5leGFtcGxlLmNvbSJ9fSwiZGF0YVNvdXJjZXMiOnsibGVhZGluZyI6eyJpZCI6InNvdXJjZUVudGl0eSIsImVudGl0eVR5cGVJZCI6Im1haW5FbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYiJdfSwiZm9sbG93aW5nIjpbeyJpZCI6ImZvbGxvd2luZ0VudGl0eSIsImVudGl0eVR5cGVJZCI6InJlbGF0ZWRFbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYyIsImQiXSwiZGVwZW5kc09uIjp7ImRhdGFTb3VyY2VJZCI6InNvdXJjZUVudGl0eSIsInJlbGF0aW9uIjp7InR5cGVJZCI6ImlzUmVsYXRlZFRvIiwic291cmNlSXMiOiJvdGhlciJ9fX1dfX0sImZpZWxkcyI6W3siaWQiOiJhIiwidGl0bGUiOnsiZW4iOiJBIn0sImlzUmVxdWlyZWQiOnRydWUsImRhdGFUeXBlIjp7InR5cGUiOiJib29sZWFuIn0sImRlZmF1bHRWYWx1ZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB1bmRlZmluZWQiLCJydWxlcyI6W3sicnVsZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB0cnVlIiwiZXJyb3JNZXNzYWdlIjp7ImVuIjoiZmFsc2UifX1dfV0sImxvb2t1cHMiOnsiaW5pdGlhbExvb2t1cHMiOlt7ImlkIjoibG9va3VwLTEiLCJzb3VyY2UiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAvbG9va3VwLTEifV19LCJ1aSI6eyJmb3JtcyI6W3siaWQiOiJmb3JtLTEiLCJmaWVsZHMiOlt7ImlkIjoiYSIsImlzUmVhZG9ubHkiOmZhbHNlLCJpc0hpZGRlbiI6ZmFsc2V9XX0seyJpZCI6ImZvcm0tMiIsImZpZWxkcyI6W3siaWQiOiJhIiwiaXNSZWFkb25seSI6dHJ1ZSwiaXNIaWRkZW4iOnRydWUsImRpc3BsYXlQbGFpblZhbHVlRnVuY3Rpb24iOnsiZW4iOiJ2YWx1ZSA9PiBKU09OLnN0cmluZ2lmeSh2YWx1ZSkifX1dfV0sImNvbHVtbnMiOlt7InR5cGUiOiJlbnRpdHkiLCJkYXRhU291cmNlSWQiOiJzb3VyY2VFbnRpdHkiLCJjcmVhdGVGb3JtSWQiOiJmb3JtLTEiLCJjb2xsYXBzZWRGb3JtSWQiOiJmb3JtLTEiLCJleHBhbmRlZEZvcm1JZCI6ImZvcm0tMSIsInRpdGxlIjp7ImVuIjoiU291cmNlcyJ9LCJzdHJpbmdpZnlFbnRpdHlGdW5jdGlvbkFzU3RyaW5nIjp7ImVuIjoiZW50aXR5ID0-IEpTT04uc3RyaW5naWZ5KGVudGl0eSkifSwiaXNMZXNzVGhhbiI6eyJmdW5jdGlvbkFzU3RyaW5nIjoiKCkgPT4gdHJ1ZSIsImluZGV4IjowfX0seyJ0eXBlIjoiZW50aXR5IiwiZGF0YVNvdXJjZUlkIjoiZm9sbG93aW5nRW50aXR5IiwiY3JlYXRlRm9ybUlkIjoiZm9ybS0yIiwiY29sbGFwc2VkRm9ybUlkIjoiZm9ybS0yIiwiZXhwYW5kZWRGb3JtSWQiOiJmb3JtLTIiLCJ0aXRsZSI6eyJlbiI6IkZvbGxvd2VycyJ9LCJzdHJpbmdpZnlFbnRpdHlGdW5jdGlvbkFzU3RyaW5nIjp7ImVuIjoiZW50aXR5ID0-IEpTT04uc3RyaW5naWZ5KGVudGl0eSkifX1dfX0.2pkkq_rD95XsnZLzDh3vrhUHwUdEyWK1vrON0tIAISgDqQ0ZajFO34aQCwsboS-121G8kNckaZ2L10oMyREX_4ORdklMkbSPv49n5MUmc_o_eN3jYZKZ9ikKefKKHQzzkZF6UVurNImnHcskniLJisfIjsmJyVypNFG05QlXlrS19AdBSAom5w4pAsDhYmoBubyS0_SYmrbRnWLfvXuz_kgamB_rmCKqVHIDZEDBI8LCBiGWNt6TILvrVht0nS3AWrE55mZRVA9C0sP-DvWzUffXP_b51pqUqve0z50JWZwaP2Mp9WfqBu-r2_4xOsNJkLo437btTrl2hLlr2VMJCQ</div>