线断路后边框盒中的空白太多 - 移动设备

Question

此无组织的列表看起来/可根据需要工作；但是，在移动设备上，线路断裂(应该(，边框框不再适合预期的文本。毫无疑问，我已经以错误的方式解决了这个问题，但是我不知道如何实现列表，以使文本边框没有不需要的白色空间。

在桌面上正确工作

在移动w/w/添加箭头上显示问题(imgur链接(

<style>
.list-container {
	text-align: left;
}
.emph-list li {
	list-style-type: none;	
}
.emph-list .special-font {
	border-style: double;
	border-color: #BB133E;
  	border-width: 3 !important;
	padding: 5px 5px 3px 5px;
	color: #002147;
	display: inline-block;
	margin-bottom: 10px !important;
	margin-right: 10px !important;
  	font-family: "FilmCryptic";
  	font-size: 28px;
  	
}
#emph-list-title {
  	font-size: 32px !important;
 	text-decoration: underline;
  	font-family: "FilmCryptic";
}
</style>
<div class="list-container">
<h1 id="emph-list-title">Who Needs a Proofreader?</h1>
<ul class="emph-list">
	<li class="special-font">Anyone with a Resume</li>
	<li class="special-font">Fiction/Non-Fiction Authors</li>
	<li class="special-font">Bloggers</li>
	<li class="special-font">Business Owners</li>
	<li class="special-font">College or Graduate Students</li>
	<li class="special-font">Entrepreneurs</li>
	<li class="special-font">Graphic Designers</li>
	<li class="special-font">Journalists</li>
	<li class="special-font">Marketing Managers</li>
	<li class="special-font">Podcasters</li>
	<li class="special-font">Script Writers</li>
	<li class="special-font">Transcriptionists</li>
	<li class="special-font">Web Content Creators</li>
</ul>
</div>

我已经尝试调整"white-space"，"word-wrap"和"display."，我也尝试过几次重写代码。

Answer 1

为此使用响应媒体查询，根据您的需要更改媒体宽度

@media (max-width: 7678px){
.emph-list {
  margin: 0;
  padding: 0;
}
.emph-list .special-font {
  font-size: 20px;
  }
 #emph-list-title {
  font-size: 26px !important;
 }
}

Answer 2

尝试此代码..

CSS

.emph-list .special-font {
   word-wrap: anywhere;
}
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 3

您可以使用可以使用 或 编写的非破坏空间。

ul {
  width: 50%;
}
li {
	border-style: double;
	border-color: #BB133E;
  border-width: 3 !important;
	padding: 5px 5px 3px 5px;
	color: #002147;
	display: inline-block;
	margin-bottom: 10px !important;
	margin-right: 10px !important;
  font-family: "FilmCryptic";
  font-size: 28px;
}

<ul>
  <li>College or Graduate Students</li>
  <li>College&nbsp;or&nbsp;Graduate&nbsp;Students</li>
</ul>

Answer 4

您可以为移动设备添加以下样式属性

@media (max-width: 560px) {
     .emph-list .special-font{ word-break: break-all; }
}