I need to showcase a comprehensive list of countries:
Countries: Angola, Botswana, Burundi, Comoros, DR Congo, Djibouti, Egypt, Eritrea, Ethiopia, Kenya, Lesotho, Libya, Madagascar, Malawi, Mauritius, Mozambique, Namibia, Rwanda, Seychelles, South Africa, Sudan, Swaziland, Tanzania, Uganda, Zambia, Zimbabwe.
However, the display seems to be getting cut off for the entire list at times:
Countries:
Angola, Botswana, Burundi, Comoros, DR Congo, Djibouti, Egypt, Eritrea, Ethiopia, Kenya, Lesotho, Libya, Madagascar, Malawi, Mauritius, Mozambique, Namibia, Rwanda, Seychelles, South Africa, Sudan, Swaziland, Tanzania, Uganda, Zambia, Zimbabwe.
If the list of countries fits on one line, it works fine:
Countries: Angola, Botswana, Burundi
How can I ensure that the complete country list displays properly? Here is the code snippet provided:
<div class="field field-type-list-text field-label-inline clearfix">
<div class="field-label">Country:</div>
<div class="field-items">
<div class="field-item even"><div class="textformatter-list">Algeria, Angola, Benin, Botswana, Burkina Faso, Burundi, Cameroon, Cape Verde, Central African Rep, Chad, Comoros, Congo, Congo {Democratic Rep}, Djibouti, Egypt, Equatorial Guinea, Eritrea, Ethiopia, Gabon, The Gambia, Ghana, Guinea Conakry, Guinea-Bissau, Ivory Coast, Kenya, Lesotho, Liberia, Libya, Madagascar, Malawi, Mali, Mauritania, Mauritius, Mozambique, Namibia, Niger, Nigeria, Rwanda, Sahrawi Arab Dem. Rep., Sao Tome & Principe, Senegal, Seychelles, Sierra Leone, Somalia, South Africa, Sudan, Swaziland, Tanzania, Togo, Tunisia, Uganda, Zambia and Zimbabwe</div></div>
</div>
.field-label, .field-label-inline .field-items {
float: left;
}