Css Ellipsis创造问题

时间:2017-11-03 20:06:19

标签: css

我试图省略长文本,但我的问题是我将private void saveUserInput() { mWeekdays = new JSONArray(); mSchedules = new JSONArray(); for(int c = 0; c < mWeekdaysView.getChildCount(); c++) { View child = mWeekdaysView.getChildAt(c); if (child != null && child instanceof TableRow) { TableRow row = (TableRow) child; for(int i = 0; i < row.getChildCount(); i++) { View input = row.getChildAt(i); if (input != null && input instanceof CheckBox) { CheckBox checkBox = (CheckBox) input; if (checkBox.isChecked()) { mWeekdays.put(checkBox.getText().toString().toLowerCase()); } } } } } for(int j = 0; j < mWeekdays.length(); j++) { for(int c = 0; c < mSchedulesView.getChildCount(); c++) { View child = mSchedulesView.getChildAt(c); if (child != null && child instanceof TableRow) { TableRow row = (TableRow) child; JSONObject schedule = new JSONObject(); for(int i = 0; i < row.getChildCount(); i++) { View input = row.getChildAt(i); if (input != null && input instanceof EditText) { try { EditText editText = (EditText) input; schedule.put(editText.getHint().toString().replace(" ", "_").toLowerCase(), editText.getText().toString()); } catch (JSONException e) { e.printStackTrace(); } } } try { schedule.put("weekday", mWeekdays.getString(j)); } catch (JSONException e) { e.printStackTrace(); } mSchedules.put(schedule); } } } } <div>放在一起。如果我设置了一定的宽度,则将<span>推向右侧,如小提琴所示:http://jsfiddle.net/NawcT/430/

我不想在文字不够长的时候显示那个空格,如小提琴中的ex:2所示。它需要根据文本大小调整宽度。可能吗?

HTML:

<span>

的CSS:

<div>
<div class="oneline">Testing 123 Testing 456 Testing 789g 456 Testing 789g 456 Testing 789g 456 Testing 789g 456 Testing 789</div>
<span>Name</span>

<div class="oneline">Testing 123 Testing 456 Testing 789g 456 </div>
<span>Name</span>
</div>

2 个答案:

答案 0 :(得分:1)

您可以使用max-width:50%这将允许div达到50%宽

  .oneline {
        text-overflow : ellipsis;
        white-space   : nowrap;
        max-width         : 50%;
        overflow      : hidden;
        display: inline-block;
    }
<div>
<div class="oneline">Testing 123 Testing 456 Testing 789g 456 Testing 789g 456 Testing 789g 456 Testing 789g 456 Testing 789</div>
<span>Name</span>
</div>

<div>
<div class="oneline">Testing 123 Testing 456 Testing 789g 456 </div>
<span>Name</span>
</div>

答案 1 :(得分:1)

尝试使用max-width而不是width。

使用宽度时,块的宽度是固定的,而如果使用最大宽度,则可以使灵活宽度不超过此处提供的限制。